Vue向数组添加新值答案

【问题标题】：Vue add new value to arrayVue向数组添加新值
【发布时间】：2021-03-24 15:45:36
【问题描述】：

我是 VUE 的新手，对于一个项目，我正在尝试更新一个传递对象的数组。我有两个按钮，分别称为 BUTTON 1 和 BUTTON 2。如果单击 BUTTON 1，它将使用 this.$set 将对象设置为 list[]。但是当 BUTTON 2 被按下时，它应该更新为新值并显示为

{
 a:1,
 b:2,
 c:3
}

现在我也将this.$set 用于按钮2，它会删除以前的值，然后将新值添加为{c:3}。有没有办法使用 VUE 在单击 BUTTON 2 时显示 { a:1,b:2,c:3} 来增加价值。

查看

<div id="app">
  <button @click="button1()">Button 1</button>
  <button @click="button2()">Button 2</button>
</div>

方法

new Vue({
  el: "#app",
  data: {
    list:[]
  },
  methods: {
    
    button1(){
      var b = '0';
      this.$set(this.list, b, {
        1:{
            a: '1',
            b: '2'
        }
      })
      console.log(this.list);
    },
    
    button2(){
      var b = '0';
      this.$set(this.list, b,{
        1:{
            c: '3'
        }
      })
      console.log(this.list);
    },
    
  }
})

下面是我的代码的 jsfiddle 链接

https://jsfiddle.net/ujjumaki/enj3dwo6/19/

【问题讨论】：

标签： javascript arrays vue.js arraylist

【解决方案1】：

希望这行得通。

new Vue({
el: "#app",
data: {
list:[]
 },
 methods: {

button1(){
console.log('button 1');

const b = '0';
const restObj=this.list[b] && this.list[b][1]
    this.$set(this.list, b, {
    1:{
    ...restObj,
        a: '1',
        b: '2'
    }
  })
  
  console.log(this.list);
},

button2(){

const b = '0';
const restObj=this.list[b] && this.list[b][1]
    this.$set(this.list, b,{
    1:{
    ...restObj,
        c: '3'
    }
  })
  
  console.log(this.list);
},

}
})

【讨论】：