接口的数据返回数据过程中，组件已经将 underfinded 数据渲染，vue报错

Question

虽然后面拿到数据后组件成功更新，但 vue 还是报错了
我尝试了两种方法
失败的方法：

<div v-if="check"> <!-- 这里的 check 会检查 data() 中的数据有没有赋值-->
<!-- 拿到数据后会将数值赋给 data() -->

成功的方法：

created() {
    axios.get('...').then(res => {
      ....
      this.check = true; // 在 data() 中设置一个检查，加载完数据后再翻转
    }).catch(err => { console.log(err); });
}

两种方法我觉得应该都能成功才对，如果拿不到数据 v-if = "check" 应该也能够检查，阻止元素/组件的渲染，但 vue 竟然报错了

Answer 1

提前声明一下就好了
https://cn.vuejs.org/v2/guide...
如果是嵌套的数据

...
data: () => ({
    item: {
        title: null,
        info: {}
    }
})
...

这样在初始渲染的时候 读取 item.info.img 就不会报错了。

Answer 2

也可以使用这种，默认情况返回为空：
item && item.info && item.info.img || ''