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: []
        }
    }
  }
}

Answer 2

在created里面调用异步ajax请求，然后得到的数据pageData的值。

Answer 3

虽然我不知道你为什么你一定要这样设计数据结构，不过banner这个list的值可以交给computed去做

computed: {
    banners () {
        let {banner=[]} = this. pageData;
        return banner || [];
    }
    banner () {
        let {p_index} = this;
        return this.banners[p_index];
    }
}

写个了示例

Answer 4

用计算属性就好了