Необходимо присвоить ID моего поставщика InvoiceTable - отношения «один ко многим»

Question

Я использую Laravel 5.7 & VueJs 2.5.* ...

У меня есть TicketInvoice, и каждый TicketInvoice связан с Vendor.Как Vendor hasMany() TicketInvoices и TicketInvoice belongTo() a Vendor.

Теперь проблема, которую я получаю, заключается в том, что когда я создаю свой счет, у меня есть список VendorsМне нужно выбрать поставщика из списка и назначить vendor_id в TicketInvoiceTable, у меня есть столбец vendor_id в TicketInvoicetable, я не знаю, как это сделать, но я делаю так:

Вот мой HTML код:

<div class="form-group">
  <label for="vendor">Select Vendor</label>
  <select id="vendor_id" name="vendor_id" type="text" class="form-control" :class="{ 'is-invalid': form.errors.has('vendor_id')}">
    <option disabled selected>Please Select Vendor</option>
    <option v-for="vendor in vendors" :key="vendor.id" :value="vendor.vendor_id">{{ vendor.vendor_company_name }}</option>
  </select>
  <has-error :form="form" field="vendor_id"></has-error>
</div>

Вот мой VueJs Код:

<script>
  export default {
    data() {
      return {
        ticketInvoices: {},
        vendors: null,
        form: new Form({
          id: "",
          vendor_id: "",
          ticket_invoice_no: "",
          ticket_invoice_date: "",
          ticket_invoice_fares_total: "",
          ticket_invoice_grand_total: "",

          ticketInvoiceItems: [{
            id: "",
            ticket_invoice_id: "",
            passenger_name: "",
            ticket_no: "",
            departure_date: "",
            fares: "",
            sub_total: ""
          }]
        })
      };
    },
    methods: {
      createTicketInvoice() {
        this.form
          .post("api/ticket-invoice")
          .then(() => {
            $("#addNewTicketInvoice").modal("hide");
          });
      })
    .catch(() => {
      swal("Failed!", "There was something wrong.", "warning");
    });
  },
  loadVendors() {
    axios.get("api/vendor").then(({
      data
    }) => (this.vendors = data.data));
  }, 
  </script>

Вот изображение для лучшего понимания:

Answer 1

Да!Я получил ответ:

Тег v-model должен ссылаться на объект в моих данных в компоненте Vue:

<select id="vendor_id" name="vendor_id" v-model="form.vendor_id" type="text" class="form-control" :class="{ 'is-invalid': form.errors.has('vendor_id')}">
  <option disabled selected>Please Select Vendor</option>
  <option v-for="vendor in vendors" :key="vendor.id" :value="vendor.id">{{ vendor.vendor_company_name }}</option>
</select>