Vueでネストされたオブジェクトにアクセスできないときの解決法がシンプルだった(ついでに同コンポーネントの再帰呼び出し)

nuxtでtwitterクライアントを作っているときに、引用ツイートの処理で詰まった。

表示したいツイートのデータ構造

ツイートオブジェクトにはそのツイートのテキスト情報やツイートしたユーザーの情報は勿論、引用元のツイート情報まで含まれている。
即ち、図の青の部分と黄色の部分は同じデータ構造。

表示したい形式

公式でもあるこの形式で表示したい。
ツイートと引用元ツイートは同じデータ構造なので、ツイートコンポーネント内でツイートコンポーネントを呼び出したらいける！
propsで引用Tweet Object渡せばできるかな。

やってみた

Cannot read property 'user' of undefined

ググると...

javascript – Vue.jsはデータオブジェクトのネストしたプロパティにアクセスできない
なるほど、まだオブジェクトが読み込めないタイミングで処理しようとして、エラーになってたということらしい。
なになに、フェッチするまで未ロードフラグを立てておいて、フェッチ完了時にフラグをおろして、表示。。。

自分のケースに反映

propsでデータを受け取るので、フェッチのタイミングとかわかりません。
でもとりあえず、propsで受け取るデータがあれば表示し始めて大丈夫なので、
受け取ったデータが参照可能かどうかで判定。

TweetCard.vue

<template>
    <div v-if="tweet">  <!-- コレで解決 -->
        <div><!-- ツイート内容 --></div>

        <!-- 引用ツイート -->
　　　　　<div class="box" v-if="tweet.is_quote_status">
            <quoted-tweet :tweet="tweet.quoted_status"/>
        </div>
    </div>
</template>

<script>
export default {
    name: 'quoted-tweet', // このコンポーネントをquoted-tweetという別名で呼び出せるように別名を宣言
    props {
        tweet: Object
    }
}
</script>

これで、TweetCardコンポーネントを再帰的に呼び出しながら、ツイートオブジェクトに含まれるツイートオブジェクトを表示させられました。