在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue獲取接口數(shù)據(jù)數(shù)組數(shù)據(jù)后,利用數(shù)組下標賦值問題

vue獲取接口數(shù)據(jù)數(shù)組數(shù)據(jù)后,利用數(shù)組下標賦值問題

問題描述:

data里面定義變量

data() {
      return {
        // 1樓
        floor1:[]
        }
       }
created里面獲取數(shù)據(jù)后賦值

this.axios.get('https://easy-mock.com/mock/5b559f6f4ff1f856c44c67ec/index')
      .then(response=> {
        console.log(response);
         if(response.status==200){
           //樓層1數(shù)據(jù)
            this.floor1 = response.data.data.floor1
            })
html里面 采用數(shù)組下標賦值渲染,頁面能正常把圖片顯示出來,但報錯了

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

這是報錯信息,這是為什么,不能用下標取值嘛
圖片描述

回答
編輯回答
嘟尛嘴

可以啊,渲染速度的問題。
剛進來的時候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:''}...]
2017年11月22日 17:38
編輯回答
雨萌萌

因為在初次渲染dom的時候floor1是空數(shù)組,floor1[0].image訪問不到,自然會報錯了,你可以加個v-if

2018年7月19日 08:28