Vue 对象属性不随 v-bind 改变：class

Question

我有一个看起来像这样的对象：

{
    data: [
        {
            id: 28,
            type: "blabla",
            name: "myname",
            language: "en",
            active: true
        },
        {
            id: 5,
            type: "blabla",
            name: "myname2",
            language: "fr",
            active: false
        },
        // etc
    ]
}

我已将此对象拆分成如下显示的组：

<li class="suggestion" v-for="suggestion in group">
    <a href="#" :class="{ active: suggestion.active }"></a>
</li>

我想突出显示我的结果，所以我在我的 Vue 对象上有一个 position 属性。可以更改。

我为位置属性设置了观察者：

position() {
    this.suggestions.forEach((suggestion, index) => {
        suggestion.active = index === this.position;
    });
}

它将使当前位置（因此当前项目处于活动状态）。当我检查对象数组及其属性时，这很好用。这些项目完美地改变了它们的 .active 属性。但是 class 绑定似乎没有重新评估。

这里出了什么问题？初始活动状态确实被考虑在内，我的第一个项目被高亮显示得很好。

尽管使用 Vue devtools，但对实际 classes 的更改没有任何变化，我可以非常好地看到对象属性正在更改。

Answer 1

所以问题是如果对象是这样创建的：

object[suggestion.type].push(suggestion);

Vue 不检测对该对象的更改。它与 Vue 如何监视对象的变化有关。

为了让 Vue 能够很好地处理您创建的对象并希望响应式，您需要利用 Vue.set

Vue.set(object, suggestion.type, suggestion)

或者

this.$set(object, suggestion.type, suggestion)

Vue 对象属性不随 v-bind 改变：class

Vue object properties not changing with v-bind:class

javascript

vue.js

vue-component

vuejs2