Заполните значения базы данных в текстовых полях, если выбран вариант раскрывающегося списка

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, и я получил ошибку, что не могу отправить форму с нулевыми значениями.