vue中當資料為空時的處理

背景

後臺返回的資料並不是固定的，可能為一個物件或者為空，可能是一個陣列或者為空。

場景

物件為空

要展示的文字資訊存在於物件的一個屬性中，物件可能為空，屬性可能為空，也可能為空字串，這些情況都顯示暫無。

<span>{{propertyShow}}</span>

data () {
    return {
        // 預設值
        propertyShow: '暫無'
    }
}

當獲取到後臺的資料後，如果不為空或空字串，就賦值。

if (res.data.obj !== null) {
    if (res.data.obj.property !== null) {
        if (res.data.obj.property.trim() !== '') {
            this.propertyShow  = res.data.obj.property
        }
    }
}

陣列為空

要展示的圖片在陣列中，陣列可能為空，也可能為空陣列，預設展示第一張圖片。

方式一

將值設定為陣列型別

this.list = res.data.list || []

設定預設圖片時只需判斷陣列長度

<img v-if="list.length>0" :src="list[0].url" alt="圖片">
<img v-else src="../default.png" alt="預設圖">

方式二

不設定值型別，直接賦值

this.list = res.data.list

設定預設圖片時需要判斷是否為空，而且必須先判斷空，否則length會報錯
1>

<img v-if="list===null || list.length===0" src="../default.png" alt="預設圖">
<img v-else :src="list[0].url" alt="圖片">

2>

<img v-if="list===null" src="../default.png" alt="預設圖">
<img v-else-if="list.length>0" :src="list[0].url" alt="圖片">
<img v-else src="../default.png" alt="預設圖">

<img v-if="list===null" src="../default.png" alt="預設圖">
<img v-else-if="list.length===0" src="../default.png" alt="預設圖">
<img v-else :src="list[0].url" alt="圖片">