javascript - La mise à jour de la variable vue ne peut pas déclencher la mise à jour de dom

Question

Comme indiqué ci-dessous, j'utilise v-for pour restituer cette liste d'éléments en HTML et contrôler s'il faut afficher (v-show) le code HTML correspondant à cet élément via l'actif de chaque élément.
Cependant, si vous sélectionnezItem via la méthode événementielle comme celle-ci et modifiez la itemList, le dom n'est pas mis à jour ? ? ?

var vue = new Vue({
    el: '#app',
    data: {
        itemList:{
            '1':{'text':'abc', 'active':false},
            '2':{'text':'abc', 'active':true}
         },
    },
    methods: {
        selectItem: function (index) {
            vue.itemList[index].active = true;
        },
        
    },
});

Answer 1

// 你的数据itemList结构改改
var vue = new Vue({
    el: '#app',
    data: {
        itemList:[
            {'text':'abc', 'active':false},
            {'text':'abc', 'active':true}
         ],
    },
    methods: {
        selectItem: function (index) {
            this.itemList[index].active = true;
        },
        
    },
});

Answer 2

vue.itemList[index].active = true; vue modifiée en ceci

Answer 3

Y a-t-il une valeur pour console.log(index) dans selectItem Vous devriez l'utiliser pour obtenir cet objet vue

?

Answer 4

La méthode de modification des données est incorrecte, donc aucune erreur n'est signalée ?

var vue = new Vue({
    el: '#app',
    data: {
        itemList:[
            {'text':'abc', 'active':false},
            {'text':'abc', 'active':true}
         ]
    },
    methods: {
        selectItem: function (index) {
            this.itemList[index].active = true;
        }
    },
});

Answer 5

Selon le format de données que vous avez fourni, je l'ai essayé et cela fonctionne. Le code est le suivant
`<p id="app">
<li v-for="(item,index) in itemList" v-on:click="selectItem(index)" v-if="item.active">

{{item.text}}

</li>
</p>
<script>

var vue = new Vue({
    el: '#app',
    data: {
        itemList:{
            '1':{'text':'abc1', 'active':true},
            '2':{'text':'abc2', 'active':true}
        },
    },
    methods: {
        selectItem: function (index) {
            console.log(vue.itemList[index].active);
            vue.itemList[index].active = false;
        },

    },
});

</script>`

Answer 6

Dans vue, ce n'est pas via vue Même si vous utilisez une variable pour enregistrer l'instance de vue via ceci

vue.itemList[index].active = true;  
换成
this.itemList[index].active = true;

Answer 7

Comment l'écrivez-vous dans votre html ? Bien que votre code js ne soit pas assez élégant, par exemple, il est plus approprié d'utiliser des tableaux au lieu d'objets ici, mais ce n'est pas faux, je pense que l'échec du rendu de votre dom est dû. ce n'est pas le problème ici. Cela devrait être lié au contrôle de formulaire, comme le problème du flux unidirectionnel de données sélectionnées.

Answer 8

Le mode valeur clé ne peut pas être surveillé par vue, vue fournit la méthode $set. . La suppression nécessite également
selectItem : function (index) {

var newA  = this.itemList[index];
newA.active = true
this.$set(this.itemList,index,newA)

},

Answer 9

Changez Vue par ceci et essayez-le

Answer 10

this.itemList.splice(index, 1, Object.assign({}, this.itemList[index], { active: true }))