Making Vue.js detect changes to array using $set()

Question

I'm having trouble updating an array that is displayed as a list. I'm trying to make Vue detect the changes using $set() (as explained in the documentation), but I can't make it work.

Here's my code:

this.choices = this.currentScene.choices;
for (i = 0; i < this.choices.length; i++) {
  choice = this.currentScene.choices[i];
  choice.parsedText = this.parseText(choice.text);
  this.choices.$set(i, choice);
}

Vue still doesn't update the view. What am I doing wrong? Thanks in advance!

Edit: Yes, "this" refers to the Vue instance.

if this is the Vue instance, then this.choices.$set doesn't exists, because Vue defines a this.$set method for the instance, not for its data — Yerko Palma
– Yerko Palma, Commented Feb 4, 2016 at 15:17
@YerkoPalma nope, the way OP is using it is correct as well. — Jeff
– Jeff, Commented Feb 4, 2016 at 15:23

bazeblackwood · Accepted Answer · 2016-02-04 15:13:28Z

2

It would definitely be useful to have a JSfiddle of your code, but I'm going to take a crack anyways.

I'm not sure you need to use that function to update the array, since as the documentation points out, its only when you need to change the index of the item.

JavaScript has a built in function called .map that takes a callback function and returns a new array with the callback applied to each item.

For example, you could translate your function to this, assuming that .parseText is a method on the Vue class.

var self = this; // so that we can access the Vue class inside map

this.choices = this.currentScene.choices.map(function(choice) {
    choice.parsedText = self.parseText(choice.text);
    return choice;
});

And Vue should pick up those changes.

answered Feb 4, 2016 at 15:13

bazeblackwood

1,2047 silver badges16 bronze badges

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

4 Comments

pawel Over a year ago

Just wanted to suggest using map since each item in the array is being modified. Here's a fiddle I made to supplement the answer I don't have to write now ;) jsfiddle.net/ch12nc6j/1

bazeblackwood Over a year ago

That's excellent, you even mocked a modified return value in the function to illustrate! kudos.

Nanofus Over a year ago

Thanks a lot for your responses! However I was not able to get it to work even with the jsfiddle example... I couldn't figure out how to load json files in jsfiddle so I hosted it on my own server: nano.fi/gametest The updateChoices() function is on line 41, and the specific case is the "Save a village" button (it doesn't update even though the array does)

Nanofus Over a year ago

The issue turned out to be the fact that I had not declared "parsedText" in the json I load the data from... I didn't think that could be a problem. Thank you anyway!

bazeblackwood · Accepted Answer · 2016-02-04 19:40:33Z

1

You could use a computed property for this, so you never have to manually update the array. Anytime choices changes you would see the change reflected in this.parsedChoices:

computed: {
    parsedChoices: function(){

        return this.currentScene.choices.map(function(choice) {
            choice.parsedText = this.parseText(choice.text);
            return choice;
        }.bind(this)); // bind Vue class as value of `this` inside func

    }
}

edited Feb 4, 2016 at 19:40

bazeblackwood

1,2047 silver badges16 bronze badges

answered Feb 4, 2016 at 15:30

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

3 Comments

bazeblackwood Over a year ago

Nice, but shouldn't the curly brace on the line with bind be moved inward?

bazeblackwood Over a year ago

and I think you should use the object syntax parsedChoices: function() since computed is an object.

Jeff Over a year ago

Thanks I missed that. @pizzasynthesis

Collectives™ on Stack Overflow

Making Vue.js detect changes to array using $set()

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related