Question

在 Vue.js 中更改对象数组中的一个属性

2019-09-16

1577

javascript vue.js

假设我有一个大致如下所示的数组结构：

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

如果我想更改数组中每个元素的一个属性，我不能只通过循环遍历整个数组并执行 obj.country = "Germany 来更改它（如果我想将每个对象的国家/地区更改为德国），因为 Vue.js 不会根据文档注册更改（我自己测试过，它确实不起作用）。我想到的唯一更改方法是执行以下操作（假设测试是数据属性）：

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

但是，这似乎不是一种非常有效的方法，因为如果我决定向所有数组元素添加另一个属性或进行其他更改，我必须搜索这种 for 循环的所有出现并包括此更改，这让我感到非常效率低下。有没有办法使用 this.$set ，同时只更改对象中的一个元素，而其他元素保持不变？

Answer 1

假设这是组件状态，改变一切的简单方法就是重新分配数组：

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

如果它是一个 prop，你可以对计算属性做类似的事情：

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