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 的值时，它会在数组的所有位置发生变化。有没有办法不发生这种情况？就像，我添加第一个对象，然后将下一个对象作为 NEW 而不是引用？

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));