Vue js reactivity issue when updating objects inside array used in v-for
Solution 1
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.
Solution 2
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.
Sohrab Taee
Please check out my LinkedIn account: https://www.linkedin.com/in/sohrabtaee/
Updated on July 19, 2022Comments
-
Sohrab Taee almost 2 years
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.