Javascript Vue.js与类绑定

所以基本上我有一个html表，带有一个

v-for

，它在一个对象数组上循环，这里并不复杂。当用户单击一行时，它将切换“链接”到给定行的对象的

selected

属性

现在，我还使用

v-bind:class=“{'active'：n.selected}”

设置了一个简单的类绑定，其中

n

是我的对象，但它不会更新。现在更奇怪的是，我使用vue cli中的webpack模板，当我：

• 选择一组行（未绑定活动类）
• 更新代码
• 点击

  F5

  ，触发网页包热重新加载

正如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>

现在还有一些细节，这些对象是通过ajax调用检索的，并且
selected
属性从一开始就不存在

有什么建议或解决办法吗？
非常感谢
 首先，不要忘记在代码中添加结束语

其次，在使用VueJS创建对象后，不能在对象上添加新属性

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

在将属性传递给VueJS之前，您需要添加所选的
属性。

默认情况下，vue.js无法跟踪创建vue实例后添加的属性
但是，您可以调用一些方法来告诉vue已添加新属性：

vm.$set（'selected'，true）//这将生成“selected”属性
可追踪



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