如果选择了下拉选项，则在文本框中填充数据库值

Question

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

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

如果有人可以节省下来让我摆脱这个问题，我将非常感激。谢谢。

这是我的HTML下拉列表和一些文本框：

<!-- =====VENDOR INVOICE DROPDOWN SELECTION===== -->
<select id="ticket_invoice_no" v-model="selectedInvoice" 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 INVOICE DATE===== -->
<input v-model="form.ct_invoice_date" type="date" name="ct_invoice_date" class="form-control">

我在data()中的vuejs：

data() {
  return {
    editmode: true,
    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
      }]
    })
  };
},

为了更好地理解的图像：

===========================I'VE TRIED THIS BUT I'D LOST SOMEWHERE==========================

我尝试将<select>的输入绑定到名为selectedInvoice的数据对象属性，例如：

data() {
  return {
    selectedInvoice: {},
    ...
  }
}

我的<select>标签就像：

<select v-model="selectedInvoice" ...>
  <option v-for="ticketInvoice in ticketInvoices" :key="ticketInvoice.id" :value="ticketInvoice">{{ ticketInvoice.ticket_invoice_no }}</option>

注意：value绑定到ticketInvoice而不是ticketInvoice.id

然后将selectedInvoice属性绑定到表单字段，如下所示：

<input v-model="selectedInvoice.ticket_invoice_no" type="text" name="ct_invoice_no" class="form-control"> ....
<tr v-for="(ctInvoiceItem, key) in selectedInvoice.ticket_invoice_items" :key="key">

执行此操作时，我的表单字段会自动填充，但是由于所有值都绑定到selectedInvoice，因此我无法提交表单，并且出现错误，我无法使用空值提交表单。