如果選擇了下拉選項，則獲取數據並在文本框中填充

Question

使用當前狀態更新的問題

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

當我選擇下拉選項時，我想用數據庫中的值自動填充表單文本框。 我從幾天開始一直在尋找解決方案，但沒有獲得任何成功。 我對此很陌生。

我 VendorInvoice 什么：我有兩個發票VendorInvoice和CustomerInvoice …我創建了VendorInvoice ，填充了所有數據並存儲在DB ……但是當我想創建CustomerInvoice ，我需要獲取並自動填充我填充並存儲的相同數據DB for VendorInvoice 。 因此，當我創建CustomerInvoice ，我具有VendorInvoice _no的<select>選項，通過選擇任何選項， 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()
  ]);
}

我在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
      }]
    })
  };
},

當我選擇選項時，我在Vue組件中看到特定的id數據填寫在我的form: 。 但實際上並沒有用該數據填充我的輸入字段，因此我可以對數據進行一些更改，最后將其作為customerInvoice存儲在DB中。

Vue Dev Tool在選擇選項之前：

選擇選項后的Vue Dev Tool ：

但不填字段：

Answer 1

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

1-我將給出一個示例，我將制作一個從數據庫中選擇*的php文件，並在json中回顯結果
2-然后使用ajax，獲取到php文件並獲取該json，我將使用在javascript文件中檢索到的數據
3-我將具有一個類似Dropdown Option onclick fetch或ajax的功能，使下拉選項等於所獲取的json。