Vue change object in array and trigger reactivity

Question

How can I trigger an update when altering part of an object found by index in an array?

The docs show how to alter the value of an array:

Vue.set(example1.items, indexOfItem, newValue)

or

example1.items.splice(indexOfItem, 1, newValue)

But how to alter the value of a property on an object in an array without changing the rest of the object?

The following works to update the property, but Vue doesn't react to the change until something else triggers an update.

example1.items[indexOfItem].some_object_property = false

tony19 · Accepted Answer · 2022-07-15 20:03:53Z

You could update the sub-property in the array element with this.$set(). For example, to increment an x subproperty in the first two array elements (creating the sub-property if it doesn't exist):

methods: {
  update() {
    this.$set(this.arr[0].foo, 'x', (this.arr[0].foo.x || 0) + 100)
    this.$set(this.arr[1].foo, 'x', (this.arr[1].foo.x || 0) + 100)
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      arr: [
        {
          foo: {
            x: 100,
            y: 200
          }
        },
        {
          foo: {
            /* x does not exist here initially */
            y: 400
          }
        }
      ]
    };
  },

  methods: {
    update() {
      this.$set(this.arr[0].foo, 'x', (this.arr[0].foo.x || 0) + 100)
      this.$set(this.arr[1].foo, 'x', (this.arr[1].foo.x || 0) + 100)
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <button @click="update">Update</button>
  <p>arr[0]: {{ arr[0] }}</p>
  <p>arr[1]: {{ arr[1] }}</p>
</div>

codepen

smheidrich · Accepted Answer · 2021-03-21 09:24:30Z

8

As long as you call set() once to set the object (with the property you are going to update) in the array, Vue will react to changes in the object's properties. Here's an example that has one array of objects initialized in our app's data, and another array of objects manually set (with Vue.set()) when mounted. Clicking the button updates a property on one object in each of those arrays, and Vue reacts. Note that the set() call that happens in mount() could really happen anytime.

https://codepen.io/jordan-kalosal/pen/VrwjoR

new Vue({
  el: "#app",
  data: {
    arr: [
      {
        property: 'OBJ1 Prop'
      },
      {
        property: 'OBJ2 Prop'
      }
    ],
    setLater: false
  },
  mounted() {
    this.$set(this, 'setLater', [
      {
        property: 'setLater OBJ1 Prop'
      },
      {
        property: 'setLater OBJ2 Prop'
      }
    ])
  },
  methods: {
    _updateObjProps() {
      this.arr[0].property = (new Date()).toString();
      this.setLater[0].property = (new Date()).toString();
    }
  }
})

edited Mar 21, 2021 at 9:24

smheidrich

4,6281 gold badge20 silver badges37 bronze badges

answered Oct 28, 2017 at 0:49

Jordan Haines

2161 silver badge4 bronze badges

2 Comments

Bersan Over a year ago

What is 'OBJ1 Prop', is this really a string? It's not very clear

Jordan Haines Over a year ago

@Bersan Yes in this case 'OBJ1 Prop' is really a string. I was just creating an example of an array with some data in it. property and OBJ1 Prop could both be anything you want, they're just example properties and values that comprise objects in this example array (arr).

antoni · Accepted Answer · 2019-07-05 07:11:53Z

Here is another demo example that I think give a good illustration of the reactivity of objects inside an array. Try it live here: https://codepen.io/antoniandre/pen/ZdjwKG

JS

new Vue({
  el: "#app",
  data: {
    array: []
  },

  methods: {
    addTimeProp() {
      this.array.forEach(item => {
        this.$set(item, 'time', null)
      })
    },
    updateTimeProp() {
      this.array.forEach(item => {
        item.time = (new Date()).toString()
      })
    }
  },

  created () {
    this.array.push({ name: 'today' }, { name: 'tomorrow' })
  }
})

HTML: PUG

#app
  h1 Reactivity of objects inside an array
  h2 Content of the array
  pre {{ array }}
  button(@click="array.push({ name: 'another day' })") Add another object
  button(@click="addTimeProp") Add `time` property
  button(@click="updateTimeProp") Update `time` property

Darkzarich · Accepted Answer · 2021-04-12 11:02:24Z

4

You can also do it like this if you don't create any new property:

this.myArray.find( el => el.id === '123').someValue = 'someValue'

Objects inside an array are completely reactive.

answered Apr 12, 2021 at 11:02

Darkzarich

5307 silver badges19 bronze badges

Collectives™ on Stack Overflow

Vue change object in array and trigger reactivity

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related