Vuejs: add the same form multiple times - vue.js

Question

I'm using laravel and vuejs.
One of the things I want to be able to do, is to allow the user to create muliple address when they click the button.
Here the sample code:
<table>
<tr>
<th>POSTAL CODE</th>
<td><input type="text" name="postal_code[]" v-model="" /></td>
</tr>
<tr>
<th>City</th>
<td>
<select name="city[]" v-model="">
<option>ABC</option>
</select>
</td>
</tr>
<tr>
<th>District</th>
<td><input type="text" name="District[]" v-model="" /></td>
</tr>
<tr>
<th>Street</th>
<td><input type="text" name="Street[]" v-model="" /></td>
</tr>
<tr>
<th>Name/th>
<td>
last_name<input type="text" name="last_name[]" v-model="" />
first_name<input type="text" name="first_name[]" v-model="" />
</td>
</tr>
</table>
<button v-on:click="add-form">ADD</button>
EDIT Sorry because my question was not clear enough.
I want to duplicate the whole table, not only one input, and everytime user click the button, i want to show one more table (the old table with old input has not be changed)
I found the solution.
Thank you so much!

Answer 1

All you need to do is to create an empty array of addresses and then push the input into this array on button click. Here's an example:
Jsfiddle: https://jsfiddle.net/zyh4jvuf/
<div id="app">
<input type="text" v-model="addressInput">
<button v-on:click="addAddress">add</button>
<!-- Displaying addresses -->
<div v-for="address in addresses">
{{address}}
</div>
</div>
new Vue({
el: '#app',
data () {
return {
addressInput: '',
addresses: []
}
},
methods: {
addAddress () {
this.addresses.push(this.addressInput)
// clear the input
this.addressInput = ''
}
}
})

Answer 2

Do you want to "duplicate" the whole table or just a single input? I guess the second want. In that case, i would rather push the info to an array like this:
<template>
<div class="formApp">
<input type="text" name="steet" v-model="street">
<button #click="addStreet">add</button>
<div v-for="str in streetArray">
<div #click="removeStreet($event)">{{ str }}</div>
</div>
</div>
</template>
<script>
export default {
name: 'formApp',
data() {
return {
streetArray: [],
street: '',
}
},
methods: {
addStreet() {
this.streetArray.push(this.street);
this.street = '';
},
removeStreet(event) {
var index = this.streetArray.indexOf(event.target.innerText);
index > -1 ? this.streetArray.splice(index, 1):'';
}
}
}
</script>
The addStreet will add a new street everytime you click the button and then it will clear the input. Then, if the user wants to delete the street, it will have to click over the street name. That way of deleting things is not user friendly at all so you could add a icon to each street name to declare that possibility.
Also, it was just an hint for you because there can be errors while writing streets names and the user needs a way to delete them. Having a bunch of inputs for wrong streets or not being able to delete the ones you added would be a total chaos. Anyways, there you go.

Answer 3

You can try the following code
new Vue({
el: '#example-3',
data:{
title:"Lists",
item:{},
items:[]
},
methods: {
addform: function () {
this.items.push(this.item);
this.item={};
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="example-3">
<table>
<tr>
<th>POSTAL CODE</th>
<td><input type="text" name="postal_code" v-model="item.postal_code" /></td>
</tr>
<tr>
<th>City</th>
<td>
<select name="city" v-model="item.city">
<option>ABC</option>
</select>
</td>
</tr>
<tr>
<th>District</th>
<td><input type="text" name="District" v-model="item.District" /></td>
</tr>
<tr>
<th>Street</th>
<td><input type="text" name="Street" v-model="item.Street" /></td>
</tr>
<tr>
<th>Name</th>
<td>
last_name<input type="text" name="last_name" v-model="item.last_name" /><br/>
first_name<input type="text" name="first_name" v-model="item.first_name" />
</td>
</tr>
</table>
<button v-on:click="addform">ADD</button>
<br/>
<h2>{{title}}</h2>
<table border="1" v-if="items.length>0">
<tr v-for="(value,index) in items">
<td>{{value.postal_code}}</td>
<td>{{value.city}}</td>
<td>{{value.District}}</td>
<td>{{value.last_name}}</td>
<td>{{value.first_name}}</td>
</tr>
</table>
</div>