VUE绑定数组的某个值初始化报错 怎么解？~

Question

我的数据 是这样的：{    banner:[      {"Bpic":"b1.jpg","spic":"s1.jpg"},      {"Bpic":"b2.jpg","spic":"s2.jpg"},      {"Bpic":"b3.jpg","spic":"s3.jpg"}    ] }template:<img :src="pageData.banner[p_index].Bpic" />也就是有个图片组件呢 绑定的是数据里面的 第p_index项的Bpic数据在data里面呢 定义了p_index (显示第几个图片索引) 和 pageData={}这个对象。现在问题是页面载入的时候 pageData是空的 所以html上面<img :src="pageData.banner[p_index].Bpic" />这句代码的绑定会代码报错，提示pageData.banner 是空的。而实际上 在mounted里面会调用一个异步ajax请求，然后得到的数据 pageData=res.data赋值。这个时候 绑定数据再刷新到页面。虽然实际页面是显示正常，但是初始化有个报错 还是很不爽。目前 我只能在data 定义pageData的时候 指定一些页面绑定用到的数据 如：data () {      return {          pageData: {"banner":[              {"bpic":"","spic":""}          ]},         p_index :0     }虽然问题是解决了但是总感觉有些蠢，不知道有没有其他更优雅一些的做法？

Answer 1

从标签下手吧。

方案1：

<img :src="pageData.banner ? pageData.banner[p_index].Bpic : ''" />

方案二:

<img :src="pageData.banner[0] ? pageData.banner[p_index].Bpic : ''" />

export default {  data(){    return {        pageData: {           banner: []
        }
    }
  }
}