Vuejs: v-model array in multiple input

Question

I have an input text field with a v-model attached, and every time someone hits the \"Add\" button, another input text get added to the DOM with the same v-model attached. I tho

Answer 1

You're thinking too DOM, it's a hard as hell habit to break. Vue recommends you approach it data first.

It's kind of hard to tell in your exact situation but I'd probably use a v-for and make an array of finds to push to as I need more.

Here's how I'd set up my instance:

new Vue({
  el: '#app',
  data: {
    finds: []
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: '' });
    }
  }
});

And here's how I'd set up my template:

  
Finds
  

    
  
  
    New Find
  

Although, I'd try to use something besides an index for the key.

Here's a demo of the above: https://jsfiddle.net/crswll/24txy506/9/