Vue.js 使用 class 绑定的奇怪渲染

Question

所以基本上我有一个 html table 和一个 v-for 循环对象数组，这里没有什么复杂的。当用户单击一行时，它会将对象 "linked" 的 selected 属性切换到给定行。

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

Select一堆行（没有活动class绑定）
更新代码
命中 F5 触发 webpack 热重载

所选行突然得到 active class，正如 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) //this will make "selected" propertie trackable

Vue.js 使用 class 绑定的奇怪渲染

Vue.js weird rendering with class binding

javascript

vue.js