問(wèn)題描述

利用v-for遍歷出N個(gè)關(guān)注按鈕，點(diǎn)擊其中一個(gè)關(guān)注按鈕，對(duì)應(yīng)的關(guān)注按鈕變成已關(guān)注，第一次是這么做的

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

發(fā)現(xiàn)點(diǎn)擊一個(gè)全都改變了，然后我把flag改成了一個(gè)數(shù)組

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

問(wèn)題解答

change部分改為Vue.set

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

模板可以簡(jiǎn)化成這樣：

<img @click='change(index)' :src='http://m.4tl426be.cn/wenda/flag[index] ? countries[num] : countriesHasAttention[num]' alt=''>

數(shù)據(jù)處理這一塊上面的答案是對(duì)的，參見(jiàn)：數(shù)組更新檢測(cè)