利用數組標記v-if（v-show）不響應的問題

問題描述

近遇到一個問題，我想用一個數組裏的值來標記v-if,例以下面代碼所示。根據數組裏面的值來使v-if所控制的標籤展現或消失，可是發現改變flagList裏面的值後頁面不會實時的響應。（若是用變量非數組來控制則不會存在這個問題）

<p v-if="flagList[0]"> hello </p>
<p v-if="flagList[1]"> hello </p>
<p v-if="flagList[2]"> hello </p>

解決方案

change(index){
	//無效操做
    this.flagList[index] = !flagList[index]
    //有效操做
    Vue.set(this.flagList,index,!this.flagList[index])
    this.$set(this.flagList,index,!this.flagList[index]) //和上面等價
}

因此，要使用vue專門提供的函數改變數組裏面的值，才能使v-if所控制的標籤進行改變。