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&nbsp;:src="pageData.banner&nbsp;?&nbsp;pageData.banner[p_index].Bpic&nbsp;:&nbsp;''"&nbsp;/>方案二:<img&nbsp;:src="pageData.banner[0]&nbsp;?&nbsp;pageData.banner[p_index].Bpic&nbsp;:&nbsp;''"&nbsp;/>export&nbsp;default&nbsp;{&nbsp;&nbsp;data(){&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pageData:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;banner:&nbsp;[] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} }