I am currently facing an issue with giving dynamically created input fields dynamic v-models from JSON data using vue.js.
Here's what I'm doing:
new Vue({
el: '#app',
data() {
return {
totalAmt: 500,
paymentMode: [{
"PAYMENTCODE": "SW",
"PAYMENTNAME": "Swiggy"
}, {
"PAYMENTCODE": "BB",
"PAYMENTNAME": "uber Eats"
}, {
"PAYMENTCODE": "WE",
"PAYMENTNAME": "Zomato"
}]
}
},
computed: {
balAmt() {
return 0 - this.totalAmt
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<label>Total Amt</label>
<input type="text" v-model="totalAmt">
</div>
<div v-for="mode in paymentMode" :key="mode.PAYMENTCODE" class="form-group col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<label>{{mode.PAYMENTNAME}}</label>
<input type="text">
</div>
<div>
<label>Bal Amt</label>
<input type="text" :value="balAmt">
</div>
</div>What I am trying to do is:
There are two fields, Total Amt and Bal Amt. In the Total Amt field there is a value, and in Bal Amt, it should be the same value as Total Amt but negative (e.g., Total Amt=500, then Bal-Amt=-500 when the page loads).
Now, there are three dynamic input fields where users can enter values. When a user types, for example, 50 in the input field for Swiggy, I want to calculate Total Amt - the entered amount (i.e., Total Amt-the field amount).
For static fields, this calculation can easily be done. But for dynamic fields, I am unsure how to achieve this.