Vue.js 'v-bind:class' 不更新，即使模型更新

Question

我有一个项目列表，我想对当前选定的项目应用一种样式。我也在使用 Vuex 来管理状态。

我的列表组件：

const List = Vue.component('list', {
    template:
            '<template v-if="items.length > 0">' +
                '<ul class="list-group md-col-12">' +
                    '<a href="#" v-for="(item, index) in items" class="list-group-item list-group-item-action" v-bind:class="{ active: item.isActive }" v-on:click="selectItem(index);">{{ g.text }}</a>' +
                '</ul>' +
            '</template>'
    computed: {
        items: function() {
            return this.$store.state.items;
        }
    },
    methods: {
        selectItem: function (index) {
            this.$store.commit('selectItem', index);
        }
    }
});

我的店铺：

const store = new Vuex.Store({
    state: {
        items: [],
        currentIndex: -1
    },
    mutations: {
        selectItem: function(state, index) {
            if (index === state.currentIndex) {
                return;
            }
            if (state.currentIndex > -1) {
                delete state.items[state.currentIndex].isActive;
            }
            state.currentIndex = index;
            state.items[state.currentIndex].isActive = true;
        }
    }
});

我看到的，也是在 Chrome DevTools 中使用 Vue 'tab' 时，每当我单击列表中的项目时，"items" 数组都会正确更新，但是class 未设置。

此外，使用时间旅行调试来检查所有突变，在这种情况下 class 已设置。

知道为什么会出现这种行为以及如何解决它吗？

Answer 1

尝试以下操作：

const List = Vue.component('list', {
    template:
            '<template>' +
                '<ul class="list-group md-col-12">' +
                    '<a href="#" v-for="(item, index) in items" class="list-group-item list-group-item-action" v-bind:class="{ active: item.isActive }" v-on:click="selectItem(index);">{{ g.text }}</a>' +
                '</ul>' +
            '</template>'

Answer 2

原来我应该更深入地阅读文档。特别是 Change Detection Caveats.

解决方案是这样更改存储突变：

selectItem: function(state, index) {
    if (index === state.currentIndex) {
        return;
    }
    if (state.currentIndex > -1) {
        Vue.delete(state.items[state.currentIndex], 'isActive');
    }
    state.currentIndex = index;
    Vue.set(state.items[state.currentIndex], 'isActive', true);
}

这里的关键是使用 Vue.delete 和 Vue.set 函数。

其他对我有帮助的回答

Vue.js 'v-bind:class' 不更新，即使模型更新

Vue.js 'v-bind:class' doesn't update even though model does

javascript

vue.js

vuejs2