[Vuejs]-Vue.js $set not updating the display

by

0đź‘Ť

âś…

There’s really no reason to pass all of the lines to each line as a prop, just pass the current line. The child components don’t need to know all of the lines:

<ticket-line  :index="$index" :line="line"></ticket-line>

var TicketLine = Vue.extend({
template: '#ticketLineTemplate',
props : ['index', 'line'],
data: function() {
    return {
        qty: this.line.qty,
        label: this.line.label
    };
},
methods: {
    addQty1: function() {
        this.qty++;
    }
}
});

https://jsfiddle.net/6zovax1v/1/

As for why you are having this issue, read “Change Detection Caveats” for info http://vuejs.org/guide/reactivity.html .

Edit: Objects are not watched deeply. So when you update the objects qty property, and then $set the object, Vue says “OK, this is the same object it was before, no need to update anything”. When you create a new object, Vue is seeing a new object and knows it needs to update.

I believe you could use $set directly on the property of the item which should trigger the update:

addQty1: function() {
        var qty = this.lines[this.index].qty;
        qty++;
        this.lines[this.index].$set('qty',qty);
        );
    },

Edit 2: after testing, that code isn’t working for me. I think the best solution for you here is to refactor your structure so that each line is a component that only knows about itself. I know you said there are reasons for this in your app but there should be another solution that is more appropriate. Components shouldn’t need to know the whole array, that’s the idea of components. You can use .sync or event broadcasting if they need to interact. Anyway sorry I couldn’t get the code working, hope you solve this.

👤Jeff

Leave a comment