UPDATED QUESTION STATUS
I'm currently working with Laravel 5.7 and VueJs 2.5.*. However, I am facing a challenge where I need to automatically populate form textboxes with data from the database when a dropdown option is selected. Despite my efforts over several days, I have not been successful in finding a solution as I am relatively new to this.
WHAT I AIM TO ACHIEVE:
I have two types of invoices: VendorInvoice and CustomerInvoice. After creating and storing data for a VendorInvoice in the database, I want to be able to autofill the same data into a CustomerInvoice. Essentially, upon selecting a VendorInvoice option from a dropdown list in the CustomerInvoice form, the fields should automatically populate with the corresponding details from the VendorInvoice and its items. This eliminates the need for manual data entry when creating a CustomerInvoice.
In my code:
VendorInvoice = ticketInvoice & VendorInvoiceItems = ticketInvoiceItems
CustomerInvoice = ctInvoice & CustomerInvoiceItems = ctInvoiceItems
If anyone could assist me in resolving this issue, I would greatly appreciate it. Thank you.
This is the HTML <select> and some ctInvoice & ctInvoiceItems fields that I want to autofill:
<form @submit.prevent="editmode ? updateCtInvoice() : createCtInvoice()">
<div class="modal-body">
<div class="row">
<!-- =====VENDOR INVOICE SELECTION===== -->
<select id="ticket_invoice_no" v-model="selectedTicketInvoiceId" @change="getRecord" name="ticket_invoice_no" type="text" class="form-control">
<option v-for="ticketInvoice in ticketInvoices" :key="ticketInvoice.id" :value="ticketInvoice.id">{{ ticketInvoice.ticket_invoice_no }}</option>
</select>
<!-- =====CUSTOMER TICKET INVOICE NUMBER===== -->
<input v-model="form.ct_invoice_no" type="text" name="ct_invoice_no" class="form-control">
<!-- =====CUSTOMER TICKET INVOICE ITEMS===== -->
<tbody>
<tr v-for="(ctInvoiceItem, key) in form.ctInvoiceItems" :key="key">
<!--Passenger Name-->
<td>
<input v-model="ctInvoiceItem.ct_passenger_name" size="40" type="text" name="ct_passenger_name" class="table-control form-control">
</td>
<!--Ticket No.-->
<td>
<input v-model="ctInvoiceItem.ct_ticket_no" size="24" type="text" name="ct_ticket_no" class="table-control form-control">
</td>
<!--Flight No.-->
<td>
<input v-model="ctInvoiceItem.ct_flight_no" size="7" type="text" name="ct_flight_no" class="table-control form-control">
</td>
</tbody>
My @change="getRecord" method:
getRecord: function(e) {
axios
.get("api/ticket-invoice/fetch/" + this.selectedTicketInvoiceId)
.then(({
data
}) => {
console.log(data);
this.form = data; // assumes the data keys maps directly to the form properties!!
})
.catch(error => {
console.log(error.response);
});
}
Route:
Route::get('ticket-invoice/fetch/{ticket_invoice}', 'API\TicketInvoiceController@fetch')->name('ticket-invoice.fetch');
My fetch(){} method:
public function fetch($id) {
$ticketInvoices = TicketInvoice::findOrFail($id);
return response() ->json([
'id' => '',
'customer_id' => '',
'ct_invoice_no' => $ticketInvoices->ticket_invoice_no,
'ct_invoice_date' => $ticketInvoices->ticket_invoice_date,
'ct_invoice_fares_total' => $ticketInvoices->ticket_invoice_fares_total,
'ct_invoice_grand_total' => $ticketInvoices->ticket_invoice_grand_total,
'ctInvoiceItems' => $ticketInvoices->ticketInvoiceItems->map(function($item) {
return [
// get the relevant $item->property for each key below
'id' => "",
'ct_invoice_id' => "",
'ct_passenger_name' => $item->passenger_name,
'ct_fares' => $item->fares,
'ct_sub_total' => $item->sub_total
];
}) ->all()
]);
}
My data() in Vue Component:
data() {
return {
editmode: true,
selectedTicketInvoiceId: false,
ticketInvoices: {},
ctInvoices: {},
customers: null,
form: new Form({
id: "",
customer_id: "",
ct_invoice_no: "",
ct_invoice_date: "",
ct_invoice_fares_total: 0,
ct_invoice_grand_total: 0,
ctInvoiceItems: [{
id: "",
ct_invoice_id: "",
ct_passenger_name: "",
ct_fares: 0,
ct_sub_total: 0
}]
})
};
},
When I select an option, I can see the specific data filling in my Vue Component's respective id, but the input fields are not being populated with that data. Therefore, I am unable to make changes and eventually store the updated information in the database as a CustomerInvoice.
Vue Dev Tool BEFORE SELECTING OPTION:
https://i.sstatic.net/5ztV8.png
Vue Dev Tool AFTER SELECTING OPTION:
https://i.sstatic.net/ND867.png
BUT NOT FILLING FIELDS: https://i.sstatic.net/Q7spY.png