Vue js reactivity issue when updating objects inside array used in v-for

Question

I have an application using vue.js. I generate a list of results using v-for in an array of objects. when I update the object inside nth item in array, using underscore _.extend, the view of project does not update. There is a solution for this problem at http://vuejs.org/guide/reactivity.html which indicates to use _.extend like this:

this.results.displayed[key] = _.extend({}, this.results.displayed[key], detail.items);

but the problem is when I use extend like it said, it does not update the view.

There's not enough information to figure out what is wrong. Can you recreate this in a fiddle? — David K. Hess
– David K. Hess, Commented Feb 7, 2016 at 17:50

Peter · Accepted Answer · 2016-02-07 22:42:33Z

13

Vue is unable to detect the change when you set a new item by array index. To get around this, you can use the $set() method that Vue adds to the array.

var newObject = _.extend({}, this.results.displayed[key], detail.items);
this.results.displayed.$set(key, newObject);

More info here.

answered Feb 7, 2016 at 22:42

Peter

12.8k4 gold badges36 silver badges39 bronze badges

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

1 Comment

asemahle Over a year ago

Here's a jsfiddle demonstrating use of .$set

Yann Stoneman · Accepted Answer · 2019-01-15 11:50:30Z

1

I solved my problem of items in v-for not updating, by making sure that the tag containing the v-for was wrapped by a tag.

It had been wrapped in a v-ons-list. And I could imagine some people wrapping it in a div tag. This is a quick possibility to eliminate before trying all the other more complicated solutions out there.

answered Jan 15, 2019 at 11:50

Yann Stoneman

1,2383 gold badges18 silver badges43 bronze badges

Collectives™ on Stack Overflow

Vue js reactivity issue when updating objects inside array used in v-for

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related