Changing one attribute in an array of objects in Vue.js

Question

Let's presume I have an array structure that roughly looks like this:

var test = [
{
    name: "Patrick",
    age: 34,
    country: "USA"
},
{
    name: "Manuel",
    age: 26,
    country: "Germany"
}]

If I want to change one property for every element in the array, I can't just change it by looping through the whole array and doing obj.country = "Germany (if I wanted to change the country of every object to Germany), since Vue.js won't register the changes according to the documentation (and I tested it myself, it indeed doesn't work). The only way of changing it that I've come up with is doing something like this (assuming that test is a data property):

for (var e in this.test) {
    this.$set(this.test, e, {
        name: this.test[e].name,
        age: this.test[e].age,
        country: "Germany"
    })
}

However, this doesn't seem like a very efficient way to do it, because if I, for example, decide to add another property to all of the array elements or make some other changes, I'd have to search all ocurances of this kind of for-loop and include this change, which strikes me as very inefficient. Is there a way to use this.$set while only changing one element in the object and leaving the other ones unchanged?

I notice you use the word "efficient" in your question. Are we talking about tens of thousands of items here, or just a few? — David Weldon
– David Weldon, Commented Sep 16, 2019 at 19:08
Yeah sorry that was a bit misleading, by efficient I just meant that it would be much easier if I didn't have to reassign each property to itself. Just a few items. — Vallaris
– Vallaris, Commented Sep 16, 2019 at 19:30

tony19 · Accepted Answer · 2022-07-15 22:55:56Z

2

Assuming this is component state, an easy way to change everything is just to reassign the array:

this.test = this.test.map(item => ({
  ...item,
  country: 'Germany',
}));

If it was a prop, you could do something similar with a computed property:

computed: {
  allGermany() {
    return this.test.map(item => ({
      ...item,
      country: 'Germany',
    }));
  }
}

edited Jul 15, 2022 at 22:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 16, 2019 at 19:01

David Weldon

64.4k11 gold badges152 silver badges146 bronze badges

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

Collectives™ on Stack Overflow

Changing one attribute in an array of objects in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related