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

Question

I am new to vue.js. I am working on form. I have a add button in my form, as user click on this button same form field will be added to this form. And user can add as many times he/she want. For this my data is .

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

As user click on add buton in html my addForm fucntion is called.

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

I read about Vue.set . I can easliy add single field or object. But I don't know how to add object to my form array.
Please help me out.

Answer 1

That works . What problem are you having?

markup

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

code

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

Even if you're new and just looking around and trying things out, you'll have more fun if you give real names to things. "form" and "fieldOne" will quickly lead into headwreck !