Vuejs: v-model array in multiple input

You're thinking through 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:

<div id="app">  <h1>Finds</h1>  <div v-for="(find, index) in finds">    <input v-model="find.value" :key="index">  </div>  <button @click="addFind">    New Find  </button></div>

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/

If you were asking how to do it in vue2 and make options to insert and delete it, please, have a look an js fiddle

new Vue({  el: '#app',  data: {    finds: []   },  methods: {    addFind: function () {      this.finds.push({ value: 'def' });    },    deleteFind: function (index) {      console.log(index);      console.log(this.finds);      this.finds.splice(index, 1);    }  }});

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script><div id="app">  <h1>Finds</h1>  <div v-for="(find, index) in finds">    <input v-model="find.value">    <button @click="deleteFind(index)">      delete    </button>  </div>    <button @click="addFind">    New Find  </button>    <pre>{{ $data }}</pre></div>