javascript - Un problème avec la combinaison de v-for et v-if dans Vue?

Question

Utilisez v-for pour parcourir N boutons de suivi, cliquez sur l'un des boutons de suivi et le bouton de suivi correspondant devient suivi

.

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

J'ai découvert que tout changeait lorsque je cliquais sur un, puis j'ai changé le drapeau en tableau

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

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

Answer 1

La partie

change est remplacée par
Vue.set

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

Answer 2

Le modèle peut être simplifié comme ceci :

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

La réponse ci-dessus pour le traitement des données est correcte, voir : Détection de mise à jour du tableau