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 class="floor-anomaly">
        <div class="floor-one" v-if="floor1[0]"><img :src="floor1[0].image" width="100%" /></div>
    </div>

要是这种取值比较多的话，建议在data里面去定义这些空字段，例如

floor1:[{image:'',contenf:''}...]