javascript - Vue.js 使用类绑定(bind)进行奇怪的渲染

Question

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

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

• 选择一堆行(未绑定(bind)事件类)
• 更新代码
• 点击 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.js 无法跟踪您在创建 vue 实例后添加的属性

• 但是，您可以调用一些方法来告诉 vue 新属性已添加:

  vm.$set('selected', true) //this will make "selected" propertie trackable