搜索

首页  >  问答  >  正文

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
}

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

全部回复(2)我来回复

  • 仅有的幸福

    仅有的幸福2017-06-26 10:55:49

    change部分改为
    Vue.set

    change(index){
        Vue.set(this.flag,index,false)
    }

    回复
    0
  • 我想大声告诉你

    我想大声告诉你2017-06-26 10:55:49

    模板可以简化成这样:

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

    数据处理这一块上面的答案是对的,参见:数组更新检测

    回复
    0
  • 取消回复