javascript - vue中v-for和v-if結(jié)合的問題?
問題描述
利用v-for遍歷出N個關(guān)注按鈕,點擊其中一個關(guān)注按鈕,對應的關(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)點擊一個全都改變了,然后我把flag改成了一個數(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)這樣做點擊的時候按鈕不發(fā)生變化。求大神指導一下
問題解答
回答1:change部分改為Vue.set
change(index){ Vue.set(this.flag,index,false)}回答2:
模板可以簡化成這樣:
<img @click='change(index)' :src='http://www.lshqa.cn/wenda/flag[index] ? countries[num] : countriesHasAttention[num]' alt=''>
數(shù)據(jù)處理這一塊上面的答案是對的,參見:數(shù)組更新檢測
相關(guān)文章:
1. java - 如何用圖畫的方式有效地表示多線程?2. bootstrp是col-md-12列的,只有col-md-10有內(nèi)容,可以讓沒有內(nèi)容的不占據(jù)位置嗎;3. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失敗!4. python - Fiddler+Android模擬器抓取app,json數(shù)據(jù)被加密了,如何解析?5. windows C++ 一般使用什么技術(shù)調(diào)用Webservice接口6. java-ee - JAVA8 lambdas表達式 改變外面變量的值7. javascript - 小程序中遇到js執(zhí)行時序問題8. html5 - 剛接觸H5,為什么我覺得很多標簽都沒什么用呢?9. MySQL中無法修改字段名的疑問10. html - eclipse 標簽錯誤
