使用javascript和vue将对象添加到数组时，应该怎么办？

Question

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

我想基于第一个对象向数组添加一个NEW对象

我发现可行的方式是这样的：

    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，我将一遍又一遍地向对象添加相同的引用，因此当我更改failExample.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));