gpt4 book ai didi

javascript - 如果选择下拉选项,则获取数据并填充到文本框中

转载 作者:行者123 更新时间:2023-12-03 00:48:06 24 4
gpt4 key购买 nike

问题已更新为当前状态

我正在使用Laravel 5.7 & VueJs 2.5.* ...

当我选择下拉选项时,我想用数据库中的值自动填充表单文本框。几天来我一直在寻找解决方案,但没有取得任何成功。我对此很陌生。

我想做什么:我有两张发票VendorInvoiceCustomerInvoice ……我创建了我的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()
]);
}

我的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选择选项之前: enter image description here

<强> Vue Dev Tool选择选项后: enter image description here

但未填写字段: enter image description here

最佳答案

我不了解 Laravel 5.7 或 vue,但概念保持不变

1-我会给出一个我会做什么的例子,我将创建一个 php 文件,其中包含来自数据库的 select * 并在 json 中回显结果
2-然后使用ajax,获取php文件并获取json,我将使用在javascript文件中检索到的数据
3 - 我将有一个类似于 Dropdown Option onclick fetch 或 ajax 的功能,使下拉选项等于获取的 json。

关于javascript - 如果选择下拉选项,则获取数据并填充到文本框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53161279/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com