需要将我的供应商 ID 分配给 InvoiceTable - 一对多关系

Need To Assign My Vendor's ID To InvoiceTable - One To Many Relationship

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

我有一个 TicketInvoice,每个 TicketInvoice 都与一个 Vendor 相关。像 Vendor hasMany() TicketInvoices 和 TicketInvoice belongTo() Vendor.

现在我遇到的问题是当我创建发票时,我有一个 Vendors 列表,我需要 select 列表中的供应商,然后分配 vendor_idTicketInvoiceTable 中,我在 TicketInvoicetable 中有一列 vendor_id,我不知道该怎么做,但我正在这样做:

这是我的 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>

为了更好地理解,这里有一张图片:

是啊!我得到了答案:

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>