[Vuejs]-Vuejs: add the same form multiple times

by

0👍

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 = ''
    }
  }
})

0👍

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.

0👍

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>

Leave a comment