Javascript – Vue-Variablenaktualisierung kann keine Dom-Aktualisierung auslösen

Question

Wie unten gezeigt, verwende ich v-for, um diese Artikelliste in HTML darzustellen, und steuere durch die Aktivierung jedes Artikels, ob der diesem Artikel entsprechende HTML-Code angezeigt (v-show) werden soll.
Wenn Sie jedoch wie folgt über die Ereignismethode „Item“ auswählen und die „itemList“ ändern, wird der Dom nicht aktualisiert? ? ?

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改成this

Answer 3

selectItem里console.log(index)有值吗，应该是用this来获取这个vue对象

Answer 4

修改数据方法都不对，不报错吗?

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

按照你提供的数据格式，我试了一下，是可以的，代码如下
`<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

在vue内部 不是通过vue来点 即使你用了一个变量来保存 vue的实例 通过 this

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

Answer 7

你html里面怎么写的，虽然你这js代码写的不够优雅，比如这里使用数组比对象更合适，但是也没错，我觉得你dom没有渲染不是这里的问题，应该是绑定表单控制，如select 数据单向流的问题。

Answer 8

键值的模式不能被vue监听到，vue提供了$set的方法。。删除也需要
selectItem: function (index) {

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

},

Answer 9

把Vue改为this试下

Answer 10

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