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!

Kaicui · Accepted Answer · 2016-05-25 00:56:17Z

1

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

answered May 25, 2016 at 0:56

Kaicui

3,8811 gold badge18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RainingChain · Accepted Answer · 2016-05-24 20:23:21Z

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.

answered May 24, 2016 at 20:23

RainingChain

7,82210 gold badges39 silver badges70 bronze badges

Collectives™ on Stack Overflow

Vue.js weird rendering with class binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related