Vue Js: empty string when posting to API-CodePudding

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);
              
            });
        

        },

CodePudding user response：

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>