如何将新对象动态添加到 vue（对象）数据数组-Vue.js？

Question

我是 vue.js 的新手。我正在处理表格。我的表单中有一个添加按钮，当用户单击此按钮时，相同的表单字段将添加到此表单中。并且用户可以添加他/她想要的任意次数。为此，我的数据是 .

data () {
    return {
      form: [{
          fieldOne: '',
          fieldTwo: '',
      }]
    }
}

当用户单击 html 中的添加按钮时，我的 addForm 功能被调用。

addForm() {
 let newObject = {
              fieldOne: '',
              fieldTwo: '',
          }
 this.form.push(newObject); // Gives error.
}

我读过Vue.set。我可以轻松添加单个字段或对象。但我不知道如何将对象添加到我的表单数组中。
请帮帮我。

Answer 1

那行得通。你有什么问题？

标记

<div id="vueRoot">
  <button @click="addForm">
    Click Me !
  </button>
  {{form}}
</div>

代码

var vm = new Vue({
  el : "#vueRoot",
  data : {
    form: [{
      fieldOne: '',
      fieldTwo: '',
    }]
  },
  methods : {
    addForm() {
      let newObject = {
        fieldOne: '',
        fieldTwo: ''
      }
      this.form.push(newObject); // Gives error.
    }
  }
});

即使您是新手，只是环顾四周并尝试一下，如果您给事物取真实的名字，您也会获得更多乐趣。“form”和“fieldOne”将很快陷入困境！