How to dynamically add a new object to array of vue (object) data- 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.

What error does it give?

Raymond Camden
– Raymond Camden

2018-02-23 11:27:47 +00:00
Commented Feb 23, 2018 at 11:27 — Raymond Camden
– Raymond Camden, Commented Feb 23, 2018 at 11:27

bbsimonbb · Accepted Answer · 2018-02-23 11:29:54Z

5

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 !

answered Feb 23, 2018 at 11:29

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Pulkit Aggarwal Over a year ago

Thank you for your answer. Actually I made some mistake in my code.

bbsimonbb Over a year ago

This can always happen :-)

Pulkit Aggarwal Over a year ago

Can we add this form using Vue.set() ?

bbsimonbb Over a year ago

No I don't think so, because you're adding a row to an array, not a property to an object. But there's no need. Vue will react to array changes made with array methods. It's only when you modify arrays with square bracket syntax that you have problems.

Pulkit Aggarwal Over a year ago

There is any difference in Vue.set() or adding value to object normally ?

|

Collectives™ on Stack Overflow

How to dynamically add a new object to array of vue (object) data- Vue.js?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related