Level 37
Just from the description I think you are missing some v-model directives on your elements. Maybe you can post the whole Vue component?
Oct 24, 2018
14
Level 1
I Need To Edit My Invoice But How To Fill Invoice Items In It
I'm using Laravel 5.7 & VueJs 2.5.* ...
I'm using a single Bootstrap Model to create as well as edit my TicketInvoice & it's TicketInvocieItems, but when i hit Edit, Bootstrap Model opens & i see data fill with TicketInvoice but can't see data of TicketInvoiceItems. I don't know how to fill data with of TicketInvoiceItems as well.
My HTML edit Button:
<a href="#" @click="editModel(ticketInvoice)">
<i class="fas fa-user-edit fa-lg text-orange"></i>
</a>
My VueJs code:
<script>
/*==============EDIT INVOICE CODE==============*/
editModel(ticketInvoice) {
this.editmode = true;
this.form.reset();
this.form.clear();
$("#addNewTicketInvoice").modal("show");
this.form.fill(ticketInvoice);
},
/*==============END EDIT INVOICE CODE==============*/
</script>
My data() in VueJs
<script>
export default {
data() {
return {
editmode: true,
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: ""
}]
})
};
},
</script>
Level 1
@Borisu may i send codepen ?
Level 1
@Borisu Here is my whole component code:
HTML whole code:
<template>
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Vendor Invoice Table</h3>
<div class="card-tools">
<button class="btn btn-default" style="background-color: transparent;" @click="newModel">
<i class="fas fa-user-plus fa-2x text-green"></i>
</button>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<tbody>
<tr>
<th>Invoice No.</th>
<th>Related Vendor</th>
<th>Invoice Date</th>
<th>Total Amount</th>
<th>Modify</th>
</tr>
<!------------ TICKET INVOICE TABLE ------------>
<tr v-for="ticketInvoice in ticketInvoices" :key="ticketInvoice.id">
<td>{{ ticketInvoice.ticket_invoice_no }}</td>
<td>{{ ticketInvoice.vendor.vendor_company_name }}</td>
<td>{{ ticketInvoice.ticket_invoice_date | myDate }}</td>
<td>{{ formatPrice(ticketInvoice.ticket_invoice_grand_total) }}</td>
<td>
<!------------ BUTTON FOR OPENING INVOICE EDIT MODEL ------------>
<a href="#" @click="editModel(ticketInvoice)">
<i class="fas fa-user-edit fa-lg text-orange"></i>
</a>
<a href="#">
<i class="fas fa-user-times fa-lg text-red"></i>
</a>
</td>
</tr>
</tbody></table>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
<div class="modal fade" id="addNewTicketInvoice" tabindex="-1" role="dialog" aria-labelledby="addNewTicketInvoiceTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-full float-sm-right" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" v-show="!editmode" id="addNewTicketInvoiceTitle">Add Vendor Invoice</h5>
<h5 class="modal-title" v-show="editmode" id="updateTicketInvoiceTitle">Update Vendor's Invoice</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!------------ TICKET INVOICE FORM ------------>
<form @submit.prevent="editmode ? updateTicketInvoice() : createTicketInvoice()">
<div class="modal-body">
<div class="row">
<!------------ TICKET INVOICE INPUT FIELDS ------------>
<div class="col-sm-2">
<div class="form-group">
<label for="ticket_invoice_no" class="control-label">Invoice No.</label>
<input v-model="form.ticket_invoice_no" type="text" name="ticket_invoice_no" class="form-control" :class="{ 'is-invalid': form.errors.has('ticket_invoice_no') }">
<has-error :form="form" field="ticket_invoice_no"></has-error>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="vendor">Select Vendor</label>
<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>
<has-error :form="form" field="vendor_id"></has-error>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="ticket_invoice_date">Invoice Date</label>
<input v-model="form.ticket_invoice_date" type="date" name="ticket_invoice_date" placeholder=""
class="form-control" :class="{ 'is-invalid': form.errors.has('ticket_invoice_date') }">
<has-error :form="form" field="ticket_invoice_date"></has-error>
</div>
</div>
</div>
<hr>
<!------------ TICKET INVOICE ITEMS INPUT FIELDS ------------>
<div class="row">
<table class="table-form table table-bordered table-responsive-md table-striped text-center">
<!------------ TICKET INVOICE ITEMS HEAD ------------>
<thead>
<tr>
<th>Passenger Name</th>
<th>Ticket No</th>
<th>Flight No</th>
<th>Departure Date</th>
<th>Sector</th>
<th>Tax BreakUp</th>
<th>Taxes Total</th>
<th>Fares</th>
<th>Total</th>
<!--Add Button-->
<th><a @click="addItems" class="btn btn-default" style="background-color: transparent;"><i class="fas fa-check-circle text-green"></i></a></th>
</tr>
</thead>
<!------------ TICKET INVOICE ITEMS BODY ------------>
<tbody>
<tr v-for="(ticketInvoiceItem, key) in form.ticketInvoiceItems" :key="key">
<!--Passenger Name-->
<td>
<input v-model="form.ticketInvoiceItems[key].passenger_name" size="40" type="text" name="passenger_name" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('passenger_name') }">
<has-error :form="form" field="passenger_name"></has-error>
</td>
<!--Ticket No.-->
<td>
<input v-model="form.ticketInvoiceItems[key].ticket_no" size="24" type="text" name="ticket_no" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('ticket_no') }">
<has-error :form="form" field="ticket_no"></has-error>
</td>
<!--Flight No.-->
<td>
<input v-model="form.ticketInvoiceItems[key].flight_no" size="7" type="text" name="flight_no" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('flight_no') }">
<has-error :form="form" field="flight_no"></has-error>
</td>
<!--Departure Date-->
<td>
<input v-model="form.ticketInvoiceItems[key].departure_date" type="date" name="departure_date" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('departure_date') }">
<has-error :form="form" field="departure_date"></has-error>
</td>
<!--Sector-->
<td>
<input v-model="form.ticketInvoiceItems[key].sector" type="text" name="sector" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('sector') }">
<has-error :form="form" field="sector"></has-error>
</td>
<!--DROPDOWN MENU-->
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu form-group" aria-labelledby="dropdownMenuButton">
<!--Taxes BreakUp-->
<input v-model="form.ticketInvoiceItems[key].tax_SB" id="tax_SB" type="number" name="tax_SB" placeholder="SB"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SB') }">
<has-error :form="form" field="tax_SB"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_SRP" id="tax_SRP" type="number" name="tax_SRP" placeholder="SRP"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SRP') }">
<has-error :form="form" field="tax_SRP"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_YQ" id="tax_YQ" type="number" name="tax_YQ" placeholder="YQ"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_YQ') }">
<has-error :form="form" field="tax_YQ"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_RG" id="tax_RG" type="number" name="tax_RG" placeholder="RG"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_RG') }">
<has-error :form="form" field="tax_RG"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_PK" id="tax_PK" type="number" name="tax_PK" placeholder="PK"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PK') }">
<has-error :form="form" field="tax_PK"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_YR" id="tax_YR" type="number" name="tax_YR" placeholder="YR"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_YR') }">
<has-error :form="form" field="tax_YR"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_SF" id="tax_SF" type="number" name="tax_SF" placeholder="SF"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_SF') }">
<has-error :form="form" field="tax_SF"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_PTT" id="tax_PTT" type="number" name="tax_PTT" placeholder="PTT"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PTT') }">
<has-error :form="form" field="tax_PTT"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_OAS" id="tax_OAS" type="number" name="tax_OAS" placeholder="OAS"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_OAS') }">
<has-error :form="form" field="tax_OAS"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_PSF" id="tax_PSF" type="number" name="tax_PSF" placeholder="PSF"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PSF') }">
<has-error :form="form" field="tax_PSF"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_PB" id="tax_PB" type="number" name="tax_PB" placeholder="PB"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_PB') }">
<has-error :form="form" field="tax_PB"></has-error>
<input v-model="form.ticketInvoiceItems[key].tax_OAD" id="tax_OAD" type="number" name="tax_OAD" placeholder="OAD"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('tax_OAD') }">
<has-error :form="form" field="tax_OAD"></has-error>
</div>
</div>
</td>
<td>
<!--Total Taxes Break Up-->
<input :value="totalTax" id="total_tax_breakup" type="number" size="10" name="total_tax_breakup"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('total_tax_breakup') }">
<has-error :form="form" field="total_tax_breakup"></has-error>
</td>
<!--Fares-->
<td>
<input v-model="form.ticketInvoiceItems[key].fares" type="number" size="10" name="fares"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('fares') }">
<has-error :form="form" field="fares"></has-error>
</td>
<!--Sub Total -->
<td>
<input v-model="form.ticketInvoiceItems[key].sub_total" type="number" size="10" name="sub_total"
class="table-control form-control" :class="{ 'is-invalid': form.errors.has('sub_total') }">
<has-error :form="form" field="sub_total"></has-error>
</td>
<!--Remove Button-->
<td>
<a v-on:click="removeItems(key);" class="btn btn-default form-control" style="background-color: transparent;"><i class="fas fa-times-circle text-fade-red"></i></a>
</td>
</tr>
</tbody>
<br>
<br>
<!------------ TICKET INVOICE ITEMS FOOTER ------------>
<tfoot class="tfoot">
<tr>
<td id="borderless" class="table-empty" colspan="5"><strong></strong></td>
<td id="fillcolor" class="table-label" colspan="3"><strong>Fares</strong></td>
<td class="table-amount">
<input v-model="form.ticket_invoice_fares_total" type="text" name="ticket_invoice_fares_total" class="form-control" :class="{ 'is-invalid': form.errors.has('ticket_invoice_fares_total') }"></td>
</tr>
<tr>
<td id="borderless" class="table-empty" colspan="5"><strong></strong></td>
<td id="fillcolor" class="table-label" colspan="3"><strong>Taxes</strong></td>
<td class="table-amount">
<input v-model="form.ticket_invoice_taxes_grand_total" type="text" name="ticket_invoice_taxes_grand_total" class="form-control" :class="{ 'is-invalid': form.errors.has('ticket_invoice_taxes_grand_total') }"></td>
</tr>
<tr>
<td id="borderless" class="table-empty" colspan="5"><strong></strong></td>
<td id="fillcolor" class="table-label" colspan="3"><strong>Total</strong></td>
<td class="table-amount">
<input v-model="form.ticket_invoice_grand_total" type="text" name="ticket_invoice_grand_total" class="form-control" :class="{ 'is-invalid': form.errors.has('ticket_invoice_grand_total') }"></td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="modal-footer" style="justify-content: center; display: flex; align-items: center">
<button type="button" data-dismiss="modal" class="btn btn-default" style="background-color: transparent;"><i class="fas fa-times-circle fa-3x text-fade-red"></i></button>
<button v-show="!editmode" class="btn btn-default" type="submit" style="background-color: transparent;"><i class="fas fa-check-circle fa-3x text-green"></i></button>
<button v-show="editmode" class="btn btn-default" type="submit" style="background-color: transparent;"><i class="fas fa-check-circle fa-3x text-orange"></i></button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
Vuejs whole code:
< script >
export default {
data() {
return {
editmode: true,
ticketInvoices: {},
vendors: null,
form: new Form({
id: "",
vendor_id: "",
ticket_invoice_no: "",
ticket_invoice_date: "",
ticket_invoice_fares_total: "",
ticket_invoice_taxes_grand_total: "",
ticket_invoice_grand_total: "",
ticket_invoice_grand_total_words: "",
ticket_invoice_terms: "",
ticketInvoiceItems: [{
id: "",
ticket_invoice_id: "",
passenger_name: "",
ticket_no: "",
flight_no: "",
departure_date: "",
sector: "",
tax_SB: 0,
tax_SRP: 0,
tax_YQ: 0,
tax_RG: 0,
tax_PK: 0,
tax_YR: 0,
tax_SF: 0,
tax_PTT: 0,
tax_OAS: 0,
tax_PSF: 0,
tax_PB: 0,
tax_OAD: 0,
fares: "",
total_tax_breakup: 0,
sub_total: ""
}]
})
};
},
computed: {
totalTax() {
let calTaxTotal =
parseInt(this.form.ticketInvoiceItems[0].tax_SB) +
parseInt(this.form.ticketInvoiceItems[0].tax_SRP) +
parseInt(this.form.ticketInvoiceItems[0].tax_YQ) +
parseInt(this.form.ticketInvoiceItems[0].tax_RG) +
parseInt(this.form.ticketInvoiceItems[0].tax_PK) +
parseInt(this.form.ticketInvoiceItems[0].tax_YR) +
parseInt(this.form.ticketInvoiceItems[0].tax_SF) +
parseInt(this.form.ticketInvoiceItems[0].tax_PTT) +
parseInt(this.form.ticketInvoiceItems[0].tax_OAS) +
parseInt(this.form.ticketInvoiceItems[0].tax_PSF) +
parseInt(this.form.ticketInvoiceItems[0].tax_PB) +
parseInt(this.form.ticketInvoiceItems[0].tax_OAD);
this.form.ticketInvoiceItems[0].total_tax_breakup = calTaxTotal;
return calTaxTotal;
}
},
methods: {
/*=================LOAD TICKET INVOICE CODE=================*/
loadTicketInvoices() {
axios
.get("api/ticket-invoice")
.then(({
data
}) => (this.ticketInvoices = data.data));
},
/*=================END LOAD TICKET INVOICE CODE=================*/
/*=================LOAD VENDORS CODE=================*/
loadVendors() {
axios.get("api/vendor").then(({
data
}) => (this.vendors = data.data));
},
/*=================END LOAD VENDORS CODE=================*/
/*=================CREATE TICKET INVOICE CODE=================*/
createTicketInvoice() {
this.$Progress.start();
this.form
.post("api/ticket-invoice")
.then(() => {
Fire.$emit("RefreshTable");
$("#addNewTicketInvoice").modal("hide");
toast({
type: "success",
title: "Invoice Created Successfully"
});
this.$Progress.finish();
})
.catch(() => {
swal("Failed!", "There was something wrong.", "warning");
this.$Progress.fail();
});
},
/*=================END CREATE TICKET INVOICE CODE=================*/
/*==============EDIT INVOICE CODE==============*/
editModel(ticketInvoice) {
this.editmode = true;
this.form.reset();
this.form.clear();
$("#addNewTicketInvoice").modal("show");
this.form.fill(ticketInvoice);
},
/*==============END EDIT INVOICE CODE==============*/
/*=================ADD ITEMS FIELDS CODE=================*/
addItems() {
this.form.ticketInvoiceItems.push({
id: "",
ticket_invoice_id: "",
passenger_name: "",
ticket_no: "",
flight_no: "",
departure_date: "",
sector: "",
fares: "",
tax_SB: 0,
tax_SRP: 0,
tax_YQ: 0,
tax_RG: 0,
tax_PK: 0,
tax_YR: 0,
tax_SF: 0,
tax_PTT: 0,
tax_OAS: 0,
tax_PSF: 0,
tax_PB: 0,
tax_OAD: 0,
total_tax_breakup: 0,
sub_total: ""
});
},
/*=================END ADD ITEMS FIELDS CODE=================*/
/*=================REMOVE ITEMS FIELDS CODE=================*/
removeItems(key) {
this.form.ticketInvoiceItems.splice(key, 1);
},
/*=================END REMOVE ITEMS FIELDS CODE=================*/
/*=================FORMAT MONEY CODE=================*/
formatPrice(value) {
let val = (value / 1).toFixed().replace(".", ".");
return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //75.674,00
},
/*=================END FORMAT MONEY CODE=================*/
/*=================OPEN NEW MODEL CODE=================*/
newModel() {
this.editmode = false;
this.form.reset();
this.form.clear();
$("#addNewTicketInvoice").modal("show");
}
},
/*=================OPEN NEW MODEL CODE=================*/
mounted() {
this.loadTicketInvoices();
Fire.$on("RefreshTable", () => {
this.loadTicketInvoices();
});
this.loadVendors();
Fire.$on("RefreshTable", () => {
this.loadVendors();
});
}
}; <
/script>
Level 37
@partabsaifzakir The first thing that pops out is this:
v-model="form.ticketInvoiceItems[key].passenger_name"
should be
v-model="ticketInvoiceItem.passenger_name"
You can also optimize your code a bit, maybe use a mixin for the Form class. There are good tutorials on that in the Learn Vue series.
Level 1
@Borisu but the [key] help me to Add/ Remove my InvoiceItems fields dynamically.
/*=================ADD ITEMS FIELDS CODE=================*/
addItems() {
this.form.ticketInvoiceItems.push({
id: "",
ticket_invoice_id: "",
passenger_name: "",
ticket_no: "",
flight_no: "",
departure_date: "",
sector: "",
fares: "",
tax_SB: 0,
tax_SRP: 0,
tax_YQ: 0,
tax_RG: 0,
tax_PK: 0,
tax_YR: 0,
tax_SF: 0,
tax_PTT: 0,
tax_OAS: 0,
tax_PSF: 0,
tax_PB: 0,
tax_OAD: 0,
total_tax_breakup: 0,
sub_total: ""
});
},
/*=================END ADD ITEMS FIELDS CODE=================*/
/*=================REMOVE ITEMS FIELDS CODE=================*/
removeItems(key) {
this.form.ticketInvoiceItems.splice(key, 1);
},
/*=================END REMOVE ITEMS FIELDS CODE=================*/
Level 37
@partabsaifzakir you can still use the key, it's not removed from the scope of the v-for loop.
Level 1
Okay @Borisu now my code is something like this:
In my HTML, <tr> & all <input> fields are like this:
<tr v-for="(ticketInvoiceItem, key) in form.ticketInvoiceItems" :key="key">
<!--Passenger Name-->
<td>
<input v-model="ticketInvoiceItem.passenger_name" size="40" type="text" name="passenger_name" class="table-control form-control" :class="{ 'is-invalid': form.errors.has('passenger_name') }">
<has-error :form="form" field="passenger_name"></has-error>
</td>
</tr>
My HTML edit Button:
<a href="#" @click="editModel(ticketInvoice)">
<i class="fas fa-user-edit fa-lg text-orange"></i>
</a>
My VueJs editModel():
<script>
/*==============EDIT INVOICE CODE==============*/
editModel(ticketInvoice) {
this.editmode = true;
this.form.reset();
this.form.clear();
$("#addNewTicketInvoice").modal("show");
this.form.fill(ticketInvoice);
},
/*==============END EDIT INVOICE CODE==============*/
</script>
My data() in VueJs
<script>
export default {
data() {
return {
editmode: true,
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: ""
}]
})
};
},
</script>
But I still cannot see, ticketInvoiceItems fields when i open edit model, but i can see InvoiceTable fields.
Level 37
@partabsaifzakir Ok i tried a part of the code, you have some mistakes in it, which should be cleared before you continue. For example the semicolon after data() {}; shouldn't be there. This is an object, which means everything inside is separated only with commas.
It seems to me that you have two separate forms, one for the ticket invoice itself and one for each item in it. That means you should be trying to edit them separately. Then you're binding data in the view to the values from the form and not the values of existing data, which is strange. What you need is to show the form. Bind the inputs to the form.som_value. When you submit send the data from form to the endpoint and immediately push it to the model responsible for showing the complete invoice.
Also open up the console and check what errors come up. They will help you to find your exact error or at least hint at where something is going awry.
EDIT: After playing around I could make it work, so your error is probably in the form.fill(ticketInvoice). Since I don't know what your form class does I just made a simple object out of form. Then to fill the data I did this:
editModel(ticketInvoice) {
this.editmode = true;
this.form = ticketInvoice;
},
I was able to see all the data In the forms.
Level 1
@Borisu
I don't understand what you mean by two separate forms, i think i have a ticketInvoice and inside it i have an array of ticketInvoiceItems.
I use form for this:
/*==========V-FORM VALIDATION CODE==========*/
import { Form, HasError, AlertError } from 'vform'
window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
/*==========END V-FORM VALIDATION CODE==========*/
I'm not getting any error in my console, i just cant see my ticketInvoiceItems, just getting an error when i press add button to add dynamic fields Cannot read property 'splice' of undefined.
Also tried something like this, but getting the same result, just can see ticketInvoice fields but cannot see ticketInvoiceItems fields.:
editModel(ticketInvoice) {
this.editmode = true;
this.form.reset();
this.form.clear();
$("#addNewTicketInvoice").modal("show");
this.form.ticketInvoiceItems = ticketInvoice;
this.form.fill(ticketInvoice);
},
Level 1
Do i need to make relation between vendor & ticketInvoiceItems, like a vendor hasMany ticketInvoiceItems, and a ticketInvoiceItems belongsTo a vendor.
Level 37
@partabsaifzakir Well I assumed you had it working with just the backend. Can you check if your ajax calls return valid data?
Level 1
My issue is solved, in my edit mode i add this line:
/*==============EDIT INVOICE CODE==============*/
editModel(ticketInvoice) {
this.editmode = true;
this.form.reset();
this.form.clear();
$("#addNewTicketInvoice").modal("show");
this.form.fill(ticketInvoice);
this.form.ticketInvoiceItems=ticketInvoice.ticket_invoice_items;
},
/*==============END EDIT INVOICE CODE==============*/
Level 37
@partabsaifzakir yes, if you look at the code I posted it's basically the same ;) Anyway glad you made it work
Level 1
@Borisu Yeah i know, You showed the right path but i didn't no how to walk through it.....
Please or to participate in this conversation.