vue获取接口数据数组数据后，利用数组下标赋值问题

Question

问题描述：

data里面定义变量data() {      return {
        // 1楼        floor1:[]
        }
       }

created里面获取数据后赋值this.axios.get('https://easy-mock.com/mock/5b559f6f4ff1f856c44c67ec/index')
      .then(response=> {
        console.log(response);         if(response.status==200){           //楼层1数据
            this.floor1 = response.data.data.floor1
            })

html里面 采用数组下标赋值渲染，页面能正常把图片显示出来，但报错了

    <div class="floor-anomaly">        <div class="floor-one"><img :src="floor1[0].image" width="100%" /></div>
    </div>

这是报错信息，这是为什么，不能用下标取值嘛

Answer 1

可以啊，渲染速度的问题。刚进来的时候html先渲染，floor1=[],floor1[0].image就是undefined啊，针对这一个解决，你可以这样<div&nbsp;class="floor-anomaly"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="floor-one"&nbsp;v-if="floor1[0]"><img&nbsp;:src="floor1[0].image"&nbsp;width="100%"&nbsp;/></div> &nbsp;&nbsp;&nbsp;&nbsp;</div>要是这种取值比较多的话，建议在data里面去定义这些空字段，例如floor1:[{image:'',contenf:''}...]