javascript - vue中v-for和v-if結合的問題?
PHP中文网
PHP中文网 2017-06-26 10:53:49
0
2
765

利用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
}

发现这样做点击的时候按钮不发生变化。
求大神指导一下
PHP中文网
PHP中文网

认证0级讲师

全部回覆(2)
仅有的幸福

change部分改為
Vue.set

change(index){
    Vue.set(this.flag,index,false)
}
我想大声告诉你

模板可以簡化成這樣:

<img @click="change(index)" :src="flag[index] ? countries[num] : countriesHasAttention[num]" alt="">

資料處理這一上面的答案是對的,請參閱:陣列更新偵測

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板