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

Posted 2023-02-22

【中文标题】如何使用 Vue.js 为数组（数据）中的所有对象添加属性？

【英文标题】：How to add a property to ALL objects in an array (data) using Vue.js?

【发布时间】：2020-09-12 14:53:51

【问题描述】：

背景：我在 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: '']
         ;
  

【问题讨论】：

在阵列上使用拼接或修改阵列然后替换它。

【参考方案1】：

您可以通过传递您希望设置新值的索引来对数组使用$set。

但是，由于您要为数组中的每个项目添加一个新属性，因此您可以只映射数组项目，添加属性并完全替换数据项，这样效率会高得多。

check() 
  this.expenseButton = this.expenseButton.map((obj) => 
    obj.newValue = ''
    return obj
  )

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

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

如果以上解决了您的问题，请接受 @blex 的回答作为您接受的解决方案。

【讨论】：

是的，但现在，key2 没有反应。不会检测到对它的更改

没错，尽管这不是预期的问题，OP 需要自己评估和发现。

@Cue。 “newValue”并非旨在替换“key2”的值。但它的目的是成为这样的第三个键/值对：key:value, key2:value2, newValue: ' ' 。

@EddieWeldon 当然，只需将obj.key2 替换为obj.newValue。

@blex 你是对的，它不是被动的。我正在尝试使用 vm.$set 功能添加“newValue”。

【参考方案2】：

您可以在循环中使用this.$set：

Vue.component('my-component', 
  template: '#my-component',
  data() 
    return 
      expenseButton: [ key: 0 ,  key: 1 ,  key: 2 ]
    ;
  ,
  methods: 
    check() 
      this.expenseButton.forEach((o, i) => 
        this.$set(this.expenseButton[i], "key2", i * 2);
      );
    
  
);

var vm = new Vue(
  el: '#app'
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <div>
    <ul>
      <li v-for="x in expenseButton" :key="x.key">
       x
      </li>
    </ul>
    <button @click="check">Update items</button>
  </div>
</template>

【讨论】：

欣赏它，伙计！我有明确的理由将它分解成一个单独的组件

不，那只是为了演示