使用VueJS进行反应性绑定

Question

我试图像这样绑定一个类：

:class="{active: favs.medium_title.fontWeight === 'bold'}"

除了在安装组件时fontWeight还不存在。

这是我的对象

favs: {
    ...
    medium_title: {},
    ...
}

因此，当我添加fontWeight属性并且它的值不设置活动的类。

Answer 1

您需要将fontWeight添加到data对象中，并为其指定一个默认值，以便fontWeight在挂载时存在。

Answer 2

因为fontWeight属性没有声明它不是反应性的，因此您需要在对象声明中声明它。

在这种情况下，单击按钮后属性中的值发生更改，该类将正确绑定。

return std::move(Cls(x));

请参阅下面的小提琴以获取解决方案。 https://jsfiddle.net/xgh63uLo/

如果您不想提前声明属性，则可以使用Vue。$ set设置新属性，使其具有反应性 检查以下链接 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Answer 3

您可以使用vm.$set（您可以阅读here）添加新属性：

this.$set( this.favs.medium_title , 'fontWeight' , 'bold' )

通过这种方式，它将是反应性的，并且将检测到更改。