Vue.js使用类绑定进行奇怪的渲染

Question

所以基本上我有一个带有v-for的html表，它循环遍历一个对象数组，这里没什么复杂的。 当用户单击某一行时，它会切换“链接”到给定行的对象的selected属性。

现在，我还使用v-bind:class="{'active': n.selected}"设置了一个简单的类v-bind:class="{'active': n.selected}"其中n是我的对象，但它没有更新。 现在更奇怪的是我使用vue-cli中的webpack模板，当我：

• 选择一堆行（没有活动类绑定）
• 更新代码
• 点击F5 ，触发webpack热重载

所选行突然得到active类，正如CSS所说，直到webpack热重载已重新生成页面。
这是我的代码：

<tr
    v-for="n in node.children"
    track-by="id"
    v-on:click="toggleElement(n)"
    v-bind:class="{'active': n.selected}">
<td>
    <i class="icons">
        <i class="folder yellow icon"></i>
    </i>
</td>
<td><a v-on:click.stop="getLevel(n.id)">{{ n.name }}</a></td>
<td><span v-if="n.modification_date">{{ n.modification_date | moment "calendar"}}</span><span v-else>-</span></td>
<td><span v-if="n.size">{{ n.size }}</span><span v-else>-</span></td>

而对于javascript方法

toggleElement: function(element) {
            element.selected =  !!(element.selected === undefined || !element.selected);
        },

现在更多细节，通过ajax调用检索对象，并且selected属性从一开始就不存在。

任何建议或解决方案？ 非常感谢！

Answer 1

首先，不要忘记在代码中添加结束</tr> 。

其次，使用VueJS创建对象后，无法在对象上添加新属性。

如果在创建元素时，其selected属性未定义，则VueJS将不会在其上添加getter / setter，并且更改它将不会更新接口。

在将其传递给VueJS之前，您需要添加selected属性。

Answer 2

• 默认情况下 ，vue.js无法跟踪在创建vue实例后添加的属性

• 但是 ，有一些方法可以调用告诉vue添加了新属性：

  vm。$ set（'selected'，true）//这将使“选定”属性可跟踪