javascript - 使用 javascript 和 vue 将对象添加到数组时我应该怎么做？

Question

抱歉，如果这是一个非常简单的问题，我尝试按照此处的一些答案进行操作，但我做不到......

我想在第一个对象的基础上向数组添加一个新对象

我发现的方法是这样的:

    new Vue({
    el: "#app",
    data: {
       name: '',  //name isnt inside and object
     //failedExample: {name: ''}
        array: []
    },
    methods: {
        add(){
            this.array.push({name: this.name}) // i push a key:value
          //this.array.push(failedExample) // what i wished to do
        }
    }
});

https://jsfiddle.net/myrgato/6mvx0y1a/

我知道通过使用注释的 array.push，我只会一遍又一遍地添加对对象的相同引用，所以当我更改 failedExample.name 的值时，它会在数组的所有位置发生变化。有没有办法不发生这种情况？比如，我添加第一个对象，然后将下一个作为新对象而不是引用添加？

Answer 1

它应该按照您希望对“failedExample”执行的操作进行工作。唯一不对的地方我看到你在插入数组时忘记了 this 关键字。

那么试试这个:

 new Vue({
    el: "#app",
    data: {
      failedExample: { name: 'test'},
      array: []
    },
    methods: {
        add(){
          this.array.push(this.failedExample);
          console.log(this.array);
        }
    }
});

更新:如果你想每次添加一个新对象，那么尝试克隆它，这样你就不会出现引用问题:

this.array.push(Object.assign({}, this.failedExample));