需要将我的供应商 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_id
在 TicketInvoiceTable
中,我在 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>
我正在使用 Laravel 5.7
& VueJs 2.5.*
...
我有一个 TicketInvoice
,每个 TicketInvoice
都与一个 Vendor
相关。像 Vendor
hasMany()
TicketInvoices
和 TicketInvoice belongTo()
Vendor
.
现在我遇到的问题是当我创建发票时,我有一个 Vendors
列表,我需要 select 列表中的供应商,然后分配 vendor_id
在 TicketInvoiceTable
中,我在 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>