javascript - 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 属性。但是类绑定(bind)似乎没有重新评估。

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

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

Answer 1

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

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

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

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

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

或者

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