ВОПРОС ОБНОВЛЕН С ТЕКУЩЕГО СОСТОЯНИЯ
Я использую Laravel 5.7 & VueJs 2.5.* ...
Я хочу автоматически заполнять текстовые поля формы значениями в базе данных, когда я выбираю опцию раскрывающегося списка. Я нашел решение с нескольких дней, но не добился успеха. Я очень новичок в этом.
ЧТО ХОЧУ ДЕЛАТЬ:
У меня есть два счета VendorInvoice и CustomerInvoice…
Я создал свой VendorInvoice, заполнил все данные и сохранил в DB…
Но когда я хочу создать CustomerInvoice, мне нужно получить и автоматически заполнить те же данные, которые я заполнил и сохранил в DB для VendorInvoice.
Поэтому, когда я создаю CustomerInvoice, у меня есть <select> опции VendorInvoice _no, при выборе любой опции CustomerInvoice поля формы должны автоматически заполняться данными VendorInvoice & VendorInvoiceItems.
Поэтому мне не нужно снова заполнять одни и те же данные в CustomerInvoice…
В моем коде:
VendorInvoice = ticketInvoice && VendorInvoiceItems = ticketInvoiceItems
CustomerInvoice = ctInvoice && CustomerInvoiceItems = ctInvoiceItems
Если кто-нибудь может помочь мне выбраться из этого вопроса, я буду очень благодарен. Спасибо.
Вот мои HTML <select> и некоторые ctInvoice & ctInvoiceItems поля, которые я хочу заполнить автоматически:
<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>
Мой @change="getRecord" метод:
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::get('ticket-invoice/fetch/{ticket_invoice}', 'API\TicketInvoiceController@fetch')->name('ticket-invoice.fetch');
Мой fetch(){} метод:
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() в компоненте Vue:
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
}]
})
};
},
Когда я выбираю опцию, я вижу в моем компоненте Vue, что определенные id данные заполняют мои form:. но на самом деле мои поля ввода не заполняются этими данными, поэтому я могу внести некоторые изменения в данные и, наконец, сохранить их в DB как customerInvoice.
Vue Dev Tool ДО ВЫБОРА ВАРИАНТОВ:
Vue Dev Tool ПОСЛЕ ВЫБОРА:
НО НЕ ЗАПОЛНЯТЬ ПОЛЯ:
