Vue.js weird rendering with class binding

Question

So basically I have an html table with a v-for that loops over an array of objects, nothing complicated here. When the user clicks on a row, it toggles the selected property of the object "linked" to the given row.

Now, I also setup a simple class-binding with v-bind:class="{'active': n.selected}" where n is my object, but it doesnt update. Now what is more weird is that I use the webpack template from the vue-cli, and when I :

• Select a bunch of rows (no active class binded)
• update code
• hit F5 which triggers the webpack hot-reload

The selected rows suddenly get the active class, as the CSS says so, until the webpack hot-reload has regenerated the page.
Here is my code :

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

And for the javascript method

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

Now some more details, the objects are being retrieved by an ajax call, and the selected property doesnt exist from the start.

Any advice or solution ? Thanks a lot!

Answer 1

First, do not forget to add the closing </tr> in your code.

Second, you can not add new attributes on objects after creating them with VueJS.

If when creating the element, its attribute selected was undefined, then VueJS will not add the getter/setter on it and changing it won't update the interface.

You will need to add the selected attribute before passing it to VueJS.

Answer 2

• by default ,vue.js can not track the property you add after vue instance had been created

• BUT ,there is some method you can call to tell vue that new properties been added:

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