Ajout de champs d'entrée dynamiques avec VueJs
J'utilise Laravel 5.7 & VueJs 2.5.*...
Je sais comment ajouter dynamiquement des champs de saisie mais pour mon application, je ne comprends pas comment faire. J'ai 'TicketInvoice.Vue', Dans cette page j'ai un bootstrap modal pour créer et mettre à jour mes factures. J'ai 2 table DB saperate une pour TicketInvoice et une autre pour TicketInvoiceItems.... TicketInvoiceItems est un tableau car un TicketInvoice a plusieurs TicketInvoiceItems.
Ma <script> tag, voici tous les champs TicketInvoice:
<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 dont je veux que leur champ soit ajouté dynamiquement.
<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>
Voici mon 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>
Vous devez ajouter un modèle contenant tous les champs dont vous avez besoin. Supposons que ce sont tous des champs de texte
<script>
export default {
data() {
return {
formFields: [
"passenger_name",
"ticket_no",
"flight_no",
"departure_date",
"sector",
]
...
}
}
}
Ensuite, vous pouvez maintenant ajouter dynamiquement les champs dans le formulaire comme suit:
<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>