Adding Dynamic Input Fields With VueJs
Solution 1
You need to add a template that has all the fields you need. Let's assume they are all text-fields
<script>
export default {
data() {
return {
formFields: [
"passenger_name",
"ticket_no",
"flight_no",
"departure_date",
"sector",
]
...
}
}
}
Then you can now dynamically add the fields into the form like so:
<td v-for="(fieldName, pos) in formFields" :key="pos">
<input v-model="form[fieldName]" size="40" type="text" :name="fieldName" class="table-control form-control" :class="{ 'is-invalid': form.errors.has(fieldName) }">
<has-error :form="form" :field="fieldName"></has-error>
</td>
Solution 2
This is the simple way to add dynamic fields to vue form.
Form:
<form>
....other fields.....
//dynamic fields section start
<div class="form-group row" v-for="(skill, k) in form.skills" :key="k">
<label for="skill" class="col-md-4 col-form-label text-md-right">Skills</label>
<div class="col-md-4">
<input id="skill" v-model="skill.skill" type="text" class="form-control"
name="skills[][skill]" value="" required
:class="{ 'is-invalid': form.errors.has('skill') }">
<has-error :form="form" field="skill"></has-error>
</div>
<div class="col-md-2">
<span v-if="k > 0" @click.prevent="remove(k)"><i class="fa fa-trash"></i></span>
</div></div>
<div class="col-md-12 text-center"><button class="btn btn-success"
@click.prevent="addMore()">Add</button>
</div>
//Dynamic fields section end
</form>
And simple add these script code in your script section:
<script>
data() {
return {
form: new Form({
name: '',
email: '',
user_skill: {
skill: ''
},
skills: [],
}),
}
},
methods: {
addMore() {
this.form.skills.push(Vue.util.extend({}, this.form.skill));
},
remove(index) {
this.form.skills.splice(index, 1);
},
}
Use this way i hope it will work fine:
Partab Saifuddin Zakir
Updated on June 22, 2022Comments
-
Partab Saifuddin Zakir almost 2 years
I'm using
Laravel 5.7
&VueJs 2.5.*
...I know how to add input fields dynamically but for my app i don't understand how to do. I have 'TicketInvoice.Vue', In that page i have a bootstrap modal to create & update my invoices. I have 2 saperate DB table one for
TicketInvoice
and other forTicketInvoiceItems
....TicketInvoiceItems
is an array because aTicketInvoice
has manyTicketInvoiceItems
.My
<script>
tag, Here is allTicketInvoice
fields:<script> export default { data() { return { ticketInvoices: {}, form: new Form({ id: "", vendor_id: "", ticket_invoice_no: "", ticket_invoice_date: "", ticket_invoice_fares_total: "", ticket_invoice_taxes_grand_total: "", ticket_invoice_grand_total: "", ticket_invoice_grand_total_words: "", ticket_invoice_terms: "", }) }; }, </script>
TicketInvoiceItems
=Data
which i want their field to be added dynamically.<script> export default { data() { return { form: new Form({ ticketInvoiceItems: [{ ticket_invoice_id: '', passenger_name: '', ticket_no: '', flight_no: '', departure_date: '', sector: '', fares: '', tax_SB: '', tax_SRP: '', tax_YQ: '', tax_RG: '', tax_PK: '', tax_YR: '', tax_SF: '', tax_PTT: '', tax_OAS: '', tax_PSF: '', tax_PB: '', tax_OAD: '', total_tax_breakup: '', sub_total: '' }] }; }, </script>
Here is my
HTML
Code:<tbody> <tr> <!--Passenger Name--> <td> <input v-model="form.passenger_name" size="40" type="text" name="passenger_name" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('passenger_name') }"> <has-error :form="form" field="passenger_name"></has-error> </td> <!--Ticket No.--> <td> <input v-model="form.ticket_no" size="24" type="text" name="ticket_no" class="table- control form-control" :class="{ 'is-invalid': form.errors.has('ticket_no') }"> <has-error :form="form" field="ticket_no"></has-error> </td> <!--Flight No.--> <td> <input v-model="form.flight_no" size="7" type="text" name="flight_no" class="table- control form-control" :class="{ 'is-invalid': form.errors.has('flight_no') }"> <has-error :form="form" field="flight_no"></has-error> </td> <!--Departure Date--> <td> <input v-model="form.departure_date" type="date" name="departure_date" class="table- control form-control" :class="{ 'is-invalid': form.errors.has('departure_date') }"> <has-error :form="form" field="departure_date"></has-error> </td> <!--Sector--> <td> <input v-model="form.sector" type="text" name="sector" class="table-control form- control" :class="{ 'is-invalid': form.errors.has('sector') }"> <has-error :form="form" field="sector"></has-error> </td> <!--DROPDOWN MENU--> <td> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria- expanded="false"> </button> <div class="dropdown-menu form-group" aria-labelledby="dropdownMenuButton"> <form class="px-1 py-1"> <!--Taxes BreakUp--> <input v-model="form.tax_SB" type="number" name="tax_SB" placeholder="SB" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SB') }"> <has-error :form="form" field="tax_SB"></has-error> <input v-model="form.tax_SRP" type="number" name="tax_SRP" placeholder="SRP" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SRP') }"> <has-error :form="form" field="tax_SRP"></has-error> <input v-model="form.tax_YQ" type="number" name="tax_YQ" placeholder="YQ" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_YQ') }"> <has-error :form="form" field="tax_YQ"></has-error> <input v-model="form.tax_RG" type="number" name="tax_RG" placeholder="RG" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_RG') }"> <has-error :form="form" field="tax_RG"></has-error> <input v-model="form.tax_PK" type="number" name="tax_PK" placeholder="PK" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PK') }"> <has-error :form="form" field="tax_PK"></has-error> <input v-model="form.tax_YR" type="number" name="tax_YR" placeholder="YR" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_YR') }"> <has-error :form="form" field="tax_YR"></has-error> <input v-model="form.tax_SF" type="number" name="tax_SF" placeholder="SF" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SF') }"> <has-error :form="form" field="tax_SF"></has-error> <input v-model="form.tax_PTT" type="number" name="tax_PTT" placeholder="PTT" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PTT') }"> <has-error :form="form" field="tax_PTT"></has-error> <input v-model="form.tax_OAS" type="number" name="tax_OAS" placeholder="OAS" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_OAS') }"> <has-error :form="form" field="tax_OAS"></has-error> <input v-model="form.tax_PSF" type="number" name="tax_PSF" placeholder="PSF" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PSF') }"> <has-error :form="form" field="tax_PSF"></has-error> <input v-model="form.tax_PB" type="number" name="tax_PB" placeholder="PB" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PB') }"> <has-error :form="form" field="tax_PB"></has-error> <input v-model="form.tax_OAD" type="number" name="tax_OAD" placeholder="OAD" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_OAD') }"> <has-error :form="form" field="tax_OAD"></has-error> </form> </div> </div> </td> <!--Total Taxes Break Up--> <td> <input v-model="form.total_tax_breakup" type="number" size="10" name="total_tax_breakup" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('total_tax_breakup') }"> <has-error :form="form" field="total_tax_breakup"></has-error> </td> <!--Fares--> <td> <input v-model="form.fares" type="number" size="10" name="fares" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('fares') }"> <has-error :form="form" field="fares"></has-error> </td> <!--Sub Total --> <td> <input v-model="form.sub_total" type="number" size="10" name="sub_total" class="table- control form-control" :class="{ 'is-invalid': form.errors.has('sub_total') }"> <has-error :form="form" field="sub_total"></has-error> </td> <!--Remove Button--> <td> <button class="btn btn-default form-control" style="background-color: transparent;"><i class="fas fa-times-circle text-fade-red"></i></button> </td> </tr> <!--Add Button--> <button class="btn btn-default" style="background-color: transparent;"><i class="fas fa- check-circle text-green"></i></button> </tbody>
-
Partab Saifuddin Zakir over 5 yearsi didn't get it, coz i have i dropdown, in that dropdown i have more input fields, i just use that dropdown to save some space and my form look good, how did i use
v-for
in that dropdown ? should i have to usev-for
in the input fields inside that dropdown and how did i call method for add or remove fields ? -
ajin over 3 years@PartabSaifuddinZakir You got solution for this?