Vue - how to add reactive properties to objects in an array of objects?

Question

I have an array of objects coming from the backend. I need to add additional data onto each object, to send.

My data coming in looks like this:

let arr = [
  {
    id: 1,
    city: 'Orlando',
  },
  {
    id: 2,
    city: 'Miami',
  },
  {
    id: 3,
    city: 'Portland',
  }
]

When the data comes loaded in through Vue, I need to have those properties be reactive. Meaning vue can see when those values change and call the appropiate lifecycle methods. See https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

let newArr = [
  {
    id: 1,
    city: 'Orlando',
    state: 'Fl',
    country: 'USA',
  },
  {
    id: 2,
    city: 'Miami',
    state: 'Fl',
    country: 'USA',
  },
  {
    id: 3,
    city: 'Portland',
    state: 'OR',
    country: 'USA',
  }
]

You can't just loop through and append properties to each object normally in vanillaJS, so how would you do this?

Answer 1

The vue docs suggests to use Object.assign when appending properties to make them reactive

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

But, this is only if you have to append one object.

For a list of objects, this is how you would initialize the data

newArr = arr.map(item => {
  let newItem = Object.assign({}, item, {
    state: undefined,
    country: undefined,
  });
  return newItem;
});

Now all your objects properties in the array of objects are reactive

Answer 2

Vue also intercepts calls to Array.push, so you may like this better:

arr.forEach(item => newArr.push(item))

Answer 3

Quite late but thought of providing the answer as it can be useful to someone else in the future:

If you would like to add an additional property to a certain object within an array of objects then you can use something like this:

var searchId = 1

const cityInfo = arr.find(ele => ele.id === searchId)
Vue.set(identifiersNode, 'state', "Karnataka")
Vue.set(identifiersNode, 'country', "India")