JSFiddle - React, Tailwind, and code Playground

by Oli Gustafsson

HTML

<div id="app">
  <my-form></my-form>
</div>

<script type="text/x-template" id="form-template">
<div>
	<div v-for="person, index in searchQuery.persons">
  <input id="first" v-model.lazy="searchQuery.persons[index].first"  size="25">
  <input id="last" v-model.lazy="searchQuery.persons[index].last" size="25">
  </div>

<button @click="addPerson()">Add field</button>
Press a few times, then go to first input field, enter some data and press TAB
<br />
length: {{ searchQuery.persons.length }}
</div>
</script>

JavaScript

Vue.component('my-form', {
	template: '#form-template',
  data: () => {
  	return {
    	searchQuery: {
          persons: [
            { first: '', last: '' }
          ]
        }
    }
	},
  methods: {
  	addPerson() {
    this.searchQuery.persons.push({ first: '', last: '' });

      },
  }
})
    
var vm = new Vue({
	el: '#app'
})