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

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

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

表示したい形式

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

やってみた

Cannot read property 'user' of undefined

ググると...

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

自分のケースに反映

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

<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コンポーネントを再帰的に呼び出しながら、ツイートオブジェクトに含まれるツイートオブジェクトを表示させられました。