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.aoyou183.cn/wenda/flag[index] ? countries[num] : countriesHasAttention[num]' alt=''>
數據處理這一塊上面的答案是對的,參見:數組更新檢測
相關文章:
1. MYSQL 根據兩個字段值查詢 但兩個值的位置可能是互換的,這個怎么查?2. 求救一下,用新版的phpstudy,數據庫過段時間會消失是什么情況?3. mysql replace 死鎖4. mysql - C#連接數據庫時一直這一句出問題int i = cmd.ExecuteNonQuery();5. javascript - 微信網頁開發從菜單進入頁面后,按返回鍵沒有關閉瀏覽器而是刷新當前頁面,求解決?6. extra沒有加載出來7. android - 安卓做前端,PHP做后臺服務器 有什么需要注意的?8. python - 數據與循環次數對應不上9. php傳對應的id值為什么傳不了啊有木有大神會的看我下方截圖10. mysql - ubuntu開啟3306端口失敗,有什么辦法可以解決?
