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）//這將使“選定”屬性可跟蹤