Vuejs: add the same form multiple times
Vuejs: add the same form multiple times
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!
3 Answers
3
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/
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: 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. You can try the following code
add
{{address}}
</div>new Vue({
el: '#app',
data () {
return {
addressInput: '',
addresses:
}
},
methods: {
addAddress () {
this.addresses.push(this.addressInput)
// clear the input
this.addressInput = ''
}
}
})<template>
add
</div>
</div>
</template>
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):'';
}
}
}
Tks for your kind answer but i want to duplicate the whole table. I edited my question, please take a look.
– hayumi kuran
Jul 3 at 0:31
new Vue({
el: '#example-3',
data:{
title:"Lists",
item:{},
items:
},
methods: {
addform: function () {
this.items.push(this.item);
this.item={};
}
}
})https://cdn.jsdelivr.net/npm/vue/dist/vue.js
POSTAL CODE
City
ABC
District
Street
Name
last_name
first_name
ADD
{{title}}
0">
{{value.postal_code}}
{{value.city}}
{{value.District}}
{{value.last_name}}
{{value.first_name}}
Great! But can i show one more table?
– hayumi kuran
Jul 3 at 0:30
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Thank you. I edited my question, please take a look.
– hayumi kuran
Jul 3 at 1:07