Vue로 중첩 된 객체에 액세스 할 수 없을 때의 해결책이 간단했습니다 (이어서 동일한 구성 요소의 재귀 호출)

nuxt에서 트위터 클라이언트를 만들 때 인용 트윗 처리로 막혔습니다.

표시하려는 트윗의 데이터 구조

트윗 오브젝트에는 그 트윗의 텍스트 정보나 트윗한 유저의 정보는 물론, 인용원의 트윗 정보까지 포함되어 있다.
즉, 그림의 파란색 부분과 노란색 부분은 동일한 데이터 구조입니다.

표시하려는 형식

공식이기도 한 이 형식으로 표시하고 싶다.
트윗과 인용 원본 트윗은 동일한 데이터 구조이므로 트윗 구성 요소 내에서 트윗 구성 요소를 호출하면됩니다!
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>

이제 Twitter 컴포넌트를 재귀적으로 호출하면서 트윗 객체에 포함된 트윗 객체를 표시할 수 있었습니다.