VueJS bind model to dynamically inserted form element

Question

I'm using VueJS with a form, and I'm having trouble with dynamically added input fields.

The form starts with a single input field, where someone can enter a number, along the lines of:

<input type="text" name="line[1]" v-model="line[1]">

There is then another part of the page which is supposed to display a running total of the amounts entered in the lines. I'm using a computed property to accomplish this.

It works fine with all of the fields that are present when the page loads. But the user can click a button to clone the previous field. This dynamically added field does not get included in the calculations. I'm guessing that may be for two reasons. First is that by the time the element is cloned, it no longer has the "v-model" attribute set (I could be wrong about this; it doesn't show up in Chrome developer tools inspection). Second, I don't believe Vue knows about the element since it was added after the Vue instance was created.

Is there a good way to handle this? I could brute force it with jQuery, I'm sure, but there must be a "Vue way".

var newRow = lastRow.clone(); And then I'm tweaking the properties on the new row so that ID attributes are different, etc. — AdamTheHutt
– AdamTheHutt, Commented Oct 3, 2016 at 20:42
Hello Adam. did you ever manage to resolve this? currently stuck on similar issue. Also don't want to brute force in jquery.. — suo
– suo, Commented Jun 16, 2020 at 5:40

J. Bruni · Accepted Answer · 2016-10-03 20:44:31Z

4

My suggestion is:

<input v-for="line in lines" v-model="line" name="line[]">

Set lines as an array in your data, and push new elements into it.

new Vue({
  data: {
    lines: ['initial text']
  },
  methods: {
    addLine: function() {
      this.lines.push(this.lines[this.lines.length - 1])
    }
  }
})

You may also check if you are not under a "change detection caveat". Please, check...

VueJS 1:

VueJS 2:

Objects: http://vuejs.org/guide/reactivity.html#Change-Detection-Caveats
Arrays: http://vuejs.org/guide/list.html#Caveats

answered Oct 3, 2016 at 20:44

J. Bruni

20.5k13 gold badges80 silver badges93 bronze badges

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

Collectives™ on Stack Overflow

VueJS bind model to dynamically inserted form element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related