类绑定的Vue.js怪异呈现

Question

基本上，我有一个带有v-for的html表，它循环在一个对象数组上，这里没有什么复杂的东西。当用户单击一行时，它会切换“链接”到给定行的对象的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

• 默认情况下，无法跟踪在创建vue实例后添加的属性。
• 但是，您可以调用一些方法告诉vue添加了新的属性： vm.$set('selected'，true) //这将使"selected“propertie可跟踪

Answer 2

首先，不要忘记在代码中添加关闭的</tr>。

第二，在用VueJS创建对象之后，不能在对象上添加新属性。

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

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