javascript - vue中v-for和v-if結合的問題？

問題描述

利用v-for遍歷出N個關注按鈕，點擊其中一個關注按鈕，對應的關注按鈕變成已關注，第一次是這么做的

<img v-if=’flag’ @click=’change()’ :src=’countries[num]’ alt=''>//關注 <img v-if=’!flag’ :src=’countriesHasAttention[num]’ alt=''>// 已關注 data () {return { flag: true} }change: function () {this.flag = false }

發現點擊一個全都改變了，然后我把flag改成了一個數組

<img v-if=’flag[index]’ @click=’change(index)’ :src=’countries[num]’ alt=''> //關注<img v-if=’!flag[index]’ :src=’countriesHasAttention[num]’ alt=''> // 已關注data () {return { flag: [true, true, true]}} change: function (index) {this.flag[index] = false}發現這樣做點擊的時候按鈕不發生變化。求大神指導一下

問題解答

change部分改為Vue.set

change(index){ Vue.set(this.flag,index,false)}回答2：

模板可以簡化成這樣：

<img @click='change(index)' :src='http://www.wxshucaidpc.com/wenda/flag[index] ? countries[num] : countriesHasAttention[num]' alt=''>

數據處理這一塊上面的答案是對的，參見：數組更新檢測