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.cgvv.com.cn/wenda/flag[index] ? countries[num] : countriesHasAttention[num]' alt=''>
數據處理這一塊上面的答案是對的,參見:數組更新檢測
相關文章:
1. javascript - 在top.jsp點擊退出按鈕后,right.jsp進行頁面跳轉,跳轉到login.jsp2. android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯,是什么情況?求大神指點3. java - spring-data Jpa 不需要執行save 語句,Set字段就可以自動執行保存的方法?求解4. css3 - 在sublime text里, 如何讓emmet生成的帶前綴css屬性垂直對齊?5. mac連接阿里云docker集群,已經卡了2天了,求問?6. [前端求職必看]前端開發面試題與答案精選_擴展問題7. javascript - js 有什么優雅的辦法實現在同時打開的兩個標簽頁間相互通信?8. javascript - jquery怎么給select option一個點擊時觸發的事件,如圖 如果選擇自定義觸發一個時間?9. css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現靈異動畫問題,求解決10. html - CSS如何處理圖片縮放問題?
