javascript - vue variable update cannot trigger dom update

Question

As shown below, I use v-for to render this itemList in html, and control whether to display (v-show) the html corresponding to this item through the active of each item.
However, if the itemList is changed through the event method selectItem like this, the dom is not updated? ? ?

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 changed to this

Answer 3

Is there a value for console.log(index) in selectItem? You should use this to get this vue object

Answer 4

The method of modifying data is incorrect, so no error is reported?

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

According to the data format you provided, I tried it and it works. The code is as follows
`<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

Inside vue, it is not through vue. Even if you use a variable to save the instance of vue through this

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

Answer 7

How do you write it in your html? Although your js code is not elegant enough, for example, it is more appropriate to use arrays instead of objects here, but it is also correct. I think the failure of your dom to render is not the problem here. It should be bound to the form control. Such as the problem of one-way flow of select data.

Answer 8

The key value mode cannot be monitored by vue, vue provides the $set method. . Deletion also requires
selectItem: function (index) {

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

},

Answer 9

Change Vue to this and try it

Answer 10

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