VueJS Array update bug

Question

I have a JSFiddle below to explain my problem but basically I have an array called tiles which has a title. When the instance is created() I add a field to this array called active

I then output this array in an <li> element and loop through it outputting the title and active objects. My problem is as you can see in the fiddle when I run v-on:click="tile.active = true" nothing happens to the active state written in the <li> element

but if I run v-on:click="tile.title = 'test'" it seems to update the active object and the title object.

Its strange behaviour I can't seem to work out why. Does anyone have any ideas?

https://jsfiddle.net/jgb34dqo/

Thanks

Not looked at the example yet but you probably want this: vuejs.org/v2/guide/reactivity.html — webnoob
– webnoob, Commented Nov 13, 2017 at 20:21

tony19 · Accepted Answer · 2022-07-16 02:17:37Z

1

It's to do with Vue not knowing about your properties, change your array to this:

tiles: [
  {
    title: 'tile one',
    active: false
  },
  {
    title: 'tile two',
    active: false
  },
  {
    title: 'tile three',
    active: false
  }
]

This allows Vue to know about the active property and in turn it knows to monitor that variable.

It's worth looking at this link about Vue Reactivity as it helps with understanding how and when data will change automagically.

If you must add the properties after

take a look at $set. It allows you to add props to an object that then get watched by vue. See this fiddle, notice the change:

this.tiles.forEach(function(tile) {
  // Tell vue to add and monitor an `active` prop against the tile object
  this.$set(tile, 'active',  false);
}.bind(this))

edited Jul 16, 2022 at 2:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 13, 2017 at 20:24

webnoob

16k13 gold badges87 silver badges169 bronze badges

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

3 Comments

H B Over a year ago

I understand that my question is how do I make it understand my properties? I am pulling data from an API which doesn't have an active object so I have added this manually.

webnoob Over a year ago

Ok, I understand, give me a moment, I'll fiddle an example for you.

webnoob Over a year ago

Edit: Just fixed the fiddle link.

Collectives™ on Stack Overflow

VueJS Array update bug

1 Answer 1

If you must add the properties after

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

If you must add the properties after

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related