Question

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

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

我已将此对象拆分为多个组，我显示如下：

position

我想突出显示我的结果，这就是为什么我的Vue对象上有position() { this.suggestions.forEach((suggestion, index) => { suggestion.active = index === this.position; }); }属性的原因。可以改变。

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

.active

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

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

对于实际类的更改没有任何反应，但是使用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)

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

1 个答案: