In my specific model, there are various values that can be updated through a form on the webpage. These values include "Quantity", "Rate", "Amount", "Net rate", and more.
The problem I am facing is with binding these values with my inputs using v-model. Everything works perfectly for all fields except the "net rate" field! It doesn't update in real-time like the other fields do. Strangely, when I manually refresh Vue-devtools UI after making changes in the field, it updates correctly. This issue seems to be isolated to the "net_rate" field only.
I'm confused about what might be causing this issue. Here is the code snippet where the first field with id discount_perc updates instantly, but the net_rate field does not:
<div class="inline-form-group col-sm-12 col-md-4 col-lg-1 text-right">
<label for="discount_perc" style="color:teal;font-size:14px;">Dis %</label>
<input type="text" ref="discount_perc" @keydown.enter="$refs.net_rate.focus()" @input="setAmount()" v-model="selectedItem.discount_perc" class="form-control text-right" />
</div>
<div class="inline-form-group col-sm-12 col-md-4 col-lg-1 text-right">
<label for="net_rate" style="color:teal;font-size:14px;">Net rate</label>
<input type="text" ref="net_rate" v-model="selectedItem.net_rate" @input="updateAmount()" @keydown.enter="addItem()" @keydown.tab="addItem()" class="form-control text-right" />
</div>
Below are the methods triggered by input events for both fields:
setAmount: function () {
var discount_percAmount = this.selectedItem.discount_perc ? (this.selectedItem.discount_perc * this.selectedItem.price) / 100 : 0;
this.selectedItem.net_rate = this.selectedItem.price - discount_percAmount;
if (this.selectedItem.size_breadth > 0 && this.selectedItem.size_length > 0) {
this.selectedItem.item_amt = this.selectedItem.net_rate * this.selectedItem.quantity * this.selectedItem.size_breadth * this.selectedItem.size_length;
} else {
this.selectedItem.item_amt = this.selectedItem.net_rate * this.selectedItem.quantity;
}
},
updateAmount: function () {
if (this.selectedItem.size_breadth > 0 && this.selectedItem.size_length > 0) {
this.selectedItem.item_amt = parseFloat(this.selectedItem.net_rate) * this.selectedItem.quantity * this.selectedItem.size_breadth * this.selectedItem.size_length;
} else {
this.selectedItem.item_amt = parseFloat(this.selectedItem.net_rate) * this.selectedItem.quantity;
}
},
I acknowledge there is a redundant piece of code that can be refactored into a method, but my current focus is on resolving this issue.
I inserted an alert to display the calculated value of net_rate in the updateAmount() function, and it shows up correctly. However, the value is not updating in the model without a manual refresh. I've been trying to troubleshoot this for over 24 hours with no success.
Has anyone encountered a similar problem before? Any insights or solutions would be greatly appreciated!
UPDATE: Below is my data structure.
data () {
return {
availableParties: [],
party: [],
availableArchitechs: [],
availableStaff: [],
availableLocations: [],
location: '',
availableItemCodes: [],
selectedItem: [],
quotation: {
party_id: null, date: new Date().toISOString().split('T')[0], architech: '', staff: '', items: [], order_no: '',
item_amt: 0, gst_0_amt: 0, gst_5_amt: 0, gst_12_amt: 0, gst_18_amt: 0, gst_28_amt: 0, final_amt: 0
},
latestQuotation: [],
partySpecificItemInfo: {
rate: 0,
discount_perc: 0,
net_rate: 0
},
updateAllowed: true,
selectedItemImageExist: false,
}
},