javascript - vue变量更新无法触发dom更新

问题描述

问 题

如下所示，我在html用v-for渲染这个itemList，通过每个item的active控制是否显示(v-show)这个item对应的html。
但是，像这样通过事件方法selectItem，改变了itemList，dom却不更新？？？

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;
        },
        
    },
});

解决方案

// 你的数据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;
        },
        
    },
});

这篇关于javascript - vue变量更新无法触发dom更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！