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}发现这样做点击的时候按钮不发生变化。求大神指导一下

问题解答

change部分改为Vue.set

change(index){ Vue.set(this.flag,index,false)}回答2：

模板可以简化成这样：

<img @click='change(index)' :src='https://www.haobala.com/wenda/flag[index] ? countries[num] : countriesHasAttention[num]' alt=''>

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