javascript - 如何动态添加新对象到 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

<强> That works .您遇到了什么问题？

标记

<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”很快就会陷入困境!