I am currently working with Laravel 5.7 and VueJs 2.5.*...
My issue is related to saving data for TicketInvoice and its corresponding TicketInvoiceItems in the database. When I submit the Invoice form, the TicketInvoice data gets stored in the database successfully. However, the TicketInvoiceItems data is being stored as null even if I fill out the form fields. Additionally, I have dynamic fields for TicketInvoiceItems as TicketInvoice has a one-to-many relationship with TicketInvoiceItems. No matter how many rows of fields I add, only one record is being stored in the database, and all items' fields are saved as null.
Below is my store method in TicketInvoiceController:
public function store(Request $request) {
$ticketInvoiceItems = collect();
$ticketInvoiceItems->push(new TicketInvoiceItems([
'ticket_invoice_id' => $request['ticket_invoice_id'],
'passenger_name' => $request['passenger_name'],
'ticket_no' => $request['ticket_no'],
'departure_date' => $request['departure_date'],
'fares' => $request['fares'],
'sub_total' => $request['sub_total']
]));
$ticketInvoice = TicketInvoice::create([
'vendor_id' => $request['vendor_id'],
'ticket_invoice_no' => $request['ticket_invoice_no'],
'ticket_invoice_date' => $request['ticket_invoice_date'],
'ticket_invoice_fares_total' => $request['ticket_invoice_fares_total'],
'ticket_invoice_grand_total' => $request['ticket_invoice_grand_total'],
]);
$ticketInvoice->ticketInvoiceItems()->saveMany($ticketInvoiceItems);
}
Here is my VueJs code, please review it for any mistakes:
<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(() => {
Fire.$emit("RefreshTable");
})
.catch(() => {
swal("Failed!", "There was something wrong.", "warning");
});
},
addItems() {
this.form.ticketInvoiceItems.push({
id: "",
ticket_invoice_id: "",
passenger_name: "",
ticket_no: "",
departure_date: "",
fares: "",
sub_total: ""
});
},
removeItems(pos) {
this.form.ticketInvoiceItems.splice(pos, 1);
},
}
};
</script>