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://v2.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?

Vincent Tang · Accepted Answer · 2019-07-10 18:39:29Z

3

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

edited Jul 10, 2019 at 18:39

answered Jul 10, 2019 at 18:28

Vincent Tang

4,1966 gold badges52 silver badges72 bronze badges

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

Comments

BATMAN_2008 · Accepted Answer · 2022-03-23 15:00:49Z

1

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")

answered Mar 23, 2022 at 15:00

BATMAN_2008

3,64210 gold badges57 silver badges172 bronze badges

Comments

Manel Clos · Accepted Answer · 2021-04-12 15:47:42Z

0

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

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

answered Apr 12, 2021 at 15:47

Manel Clos

1,8452 gold badges21 silver badges16 bronze badges

Comments

Mohammad Javad Khademian · Accepted Answer · 2023-04-29 11:11:27Z

0

the best approach is to create a computed property.

1. Without Store

a Vue component like this:

data() {
 return {
  arr: []
 }
},
methods: {
 fetchArr() {
  // fetch array data
  this.arr = [...]
},
computed: {
 newArr() {
   return this.arr.map(item => {
    item.contry = '...'
    item.state = '...'
    return item
  })
 }

2. With Store (Vuex)

state() {
 return {
  arr: []
 }
}

mutations: {
  setArr(state, arr) {
   state.arr = arr
  }
}

actions: {
 fetchArr({commit}) {
 // api call
 commit('setArr', arr)
 }
}

getters: {
 newArr(state) {
  return state.arr.map(item => {
        item.contry = '...'
        item.state = '...'
        return item
      })
  }
}

answered Apr 29, 2023 at 11:11

Mohammad Javad Khademian

5881 gold badge6 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related