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}發現這樣做點擊的時候按鈕不發生變化。求大神指導一下
問題解答
回答1:change部分改為Vue.set
change(index){ Vue.set(this.flag,index,false)}回答2:
模板可以簡化成這樣:
<img @click='change(index)' :src='http://www.gepszalag.com/wenda/flag[index] ? countries[num] : countriesHasAttention[num]' alt=''>
數據處理這一塊上面的答案是對的,參見:數組更新檢測
相關文章:
1. java servlet后臺導出上萬條數據到excel,太慢!求解2. javascript - 一排三個框,各個框的間距是15px,距離外面的白框間距也是15px,這個css怎么寫?3. mysql函數unix_timestamp如何處理1970.1.1以前的數據?4. 怎樣使留言的數據與登錄的用戶名,密碼保持一致(在數據庫上是一行的)。5. mysql money 插入數據為什么報錯?6. java - 關于使用POI解析excel中的時間格的值7. html - 急求,能否用flex或者高端點的CSS來布局這個圖呢?不想用浮動或定位了8. css如何實現兩欄布局,左邊固定寬度,右邊寬度自適應,且高度和瀏覽器當前高度一致?9. javascript - vue-cli 發布之后,如何在接口地址中去掉在開發環境中設置的跨域proxyTable配置10. 請問永久和臨時重定向有什么區別
