如何使用 Vue.js 向数组（数据）中的所有对象添加属性？

Question

背景：我在 data() 中有一个数组，其中填充了来自后端的对象。如果 GET 请求检索 6 个对象，这 6 个对象将在数组中更新。

问题：我已经了解需要 vm.$set 来向对象添加属性。但是如何为数组中的所有对象添加属性呢？

我想改变：

 data() {
    return {
      expenseButton: [{key:value},{key:value},{key:value}]
         };
  }

到

data() {
    return {
      expenseButton: [{key:value, key2:value2},{key:value, key2:value2},{key:value, key2:value2}]
         };
  }

将 newValue 记录为数组而不是每个对象中的属性的尝试失败

  methods: {
    check() {
      this.$set(this.expenseButton, "newValue", this.expenseButton.newValue);
      console.log(this.expenseButton);
    }
  },

更新 如何通过 vm.$set 定位数组中的所有对象，以便所有对象都有一个名为“newValue”的新属性

 data() {
    return {
      expenseButton: [{key1:value1},{key2:value2},{key3:value3}]
         };
  }

到

 data() {
    return {
      expenseButton: [{key1:value1,newValue: ''},{key2:value2, newValue: ''},{key3:value3, newValue: ''}]
         };
  }

Answer 1

您可以$set通过传递要设置新值的索引来在数组上使用。

\n\n

但是，由于您要向数组中的每个项目添加新属性，因此您可以只映射数组项目，添加属性并完全替换数据项目，这会更有效。

\n\n

check() {\n  this.expenseButton = this.expenseButton.map((obj) => {\n    obj.newValue = \'\'\n    return obj\n  })\n}\n

\n\n

为了保持反应性，您需要使用$set相应的键值对调用每个索引。请参阅@blex的答案以供参考。

\n\n

check() {\n  this.expenseButton.forEach((_, index) => {\n    this.$set(this.expenseButton[index], \'newValue\', \'\')\n  })\n}\n

\n\n

如果上述解决了您的问题，请接受@blex\xe2\x80\x99s 答案作为您接受的解决方案。

\n