in my below code .. i'm updating data using Node Js REST API and in remaining field i have set an equation using v-model=remaininginst to keep track of the result and save it into remaininginst so i can post it to API, but on console.log i'm getting NaN empty data stored in remaininginst and it's not posting due to this error..
am i doing something wrong here? and if yes is there a way to do it?
<h4 v-model="remaininginst"> remain : ${{ Number(instPrice) -(Number(totPaid) + Number(instOne) ) }}</h4> //equation shows coorect data on html
</template>
export default {
name: 'light-table',
components: {
loader
},
data() {
return {
instPrice: "",
remaininginst: "",
instOne:""
};
},
computed: {
totPaid() {
let installments = this.Flats.payment.installment_payment.installments;
let paidInstallments = installments.filter(obj => obj.is_paid == true);
let totalPaid = paidInstallments.reduce((sum, obj) => sum + parseInt(obj.amount), 0);
return totalPaid;
}
},
methods: {
PostPayment() {
this.error = []
console.log(this.payment);
var data = {
payment: {
installment_payment: {
remaining: this.remaininginst,//getting Nan
},
paid_amount: this.instOne,
},
}
BuildingsService.Payment(this.FlatId, data).then((response) => {
console.log(data);
});
},You could not use v-model on h4 tag.You could try to create another computed property which contains the expression you need and show it on view.Below sample move remaininginst from data to computed as a computed property.
<template>
<h4>
remain : $ {{ remaininginst }}
</h4>
</template>
<script>
export default {
data() {
return {
instPrice: "",
instOne: "",
};
},
computed: {
totPaid() {
let installments = this.Flats.payment.installment_payment.installments;
let paidInstallments = installments.filter(obj => obj.is_paid == true);
let totalPaid = paidInstallments.reduce((sum, obj) => sum + parseInt(obj.amount), 0);
return totalPaid;
}
remaininginst() {
return (
Number(this.instPrice) - (Number(this.totPaid) + Number(this.instOne))
);//return any string you want
},
},
methods: {
PostPayment() {
console.log(this.remaininginst);
},
},
};
</script>