无法准备未定义属性

在做一个电影详情页的时候，遇到一个结构稍微复杂的数据结构，如下图

需求是将电影的类型渲染到页面上
渲染部分的代码

            <p class="title">{{detail.alt_title | formatTitle}}</p>
            <p class="grey">{{detail.attrs.movie_type.join(" | ")}}</p>
            <p class="grey">{{detail.attrs.pubdate[0]}}</p>
            <p class="grey">{{detail.attrs.country[0] +' | '+ detail.attrs.movie_duration[0]}}</p>
            <p class="sum">{{detail.summary}}</p>

数据渲染上去了但是控制台一直报错，提示attrs后面的字段未定义，如下图

v-if解决报错

这里的问题是，你正在异步检索数据，但你定义模板的方式是希望立即填充数据。例如在模板中有以下代码

{{detail.attrs.movie_type.join(" | ")}}

但是在第一次呈现模板时，attrs存在或者undefined。但是你试图访问该值的movie_type属性，而undefined没有属性，这会导致你的错误。

为了解决这个问题，在你有数据之前不要渲染模板

        <div class="detail" v-if="detail.attrs">
            <p class="grey">{{detail.attrs.movie_type.join(" | ")}}</p>
            ...
        </div>