Question

以当前状态更新的问题

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

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

我想做什么： 我有两个发票VendorInvoice和CustomerInvoice… 我创建了VendorInvoice，填充了所有数据并存储在DB中…… 但是，当我想创建CustomerInvoice时，我需要为DB获取并自动填充VendorInvoice中填充和存储的相同数据。因此，当我创建CustomerInvoice时，我有一个<select>的{{1}}选项，通过选择任何选项VendorInvoice _no，表单字段应自动填充CustomerInvoice和{{ 1}}数据。因此，我不必自己在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');

我在Vue组件中的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()
  ]);
}

当我选择选项时，我在Vue组件中看到特定的data()数据填写了我的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 }] }) }; },。但它实际上并未用该数据填充我的输入字段，因此我可以对数据进行一些更改，最后将其作为id存储在form:中。

DB，然后选择选项：

customerInvoice选择选项后：

但不填写字段：

Answer 1

我不了解Laravel 5.7或vue，但概念仍然相同

1-我将举一个例子，我将制作一个数据库中具有select *的php文件，并在json中回显结果
2-然后使用ajax，提取到php文件并获取json，我将使用在javascript文件中检索到的数据
3-我将具有类似Dropdown Option onclick fetch或ajax的功能，使下拉选项等于获取的json。

如果选择了下拉菜单，则提取数据并在文本框中填充

1 个答案: