How to remove ParseInt NaN issues from the code? - laravel

Question

This is my code i'm trying to get the sum from input values .
It works fine when i enter numbers but as soon as i clear any input field i get total as NaN. i know using parseInt for number value is troubling , but if i'm not using parseInt it appends number instead of getting doing Sum on input Values .
I want to solve it ? why NaN is coming and how to make this code error free .. don't want to use if else for NaN or IsNan please suggest practical approach --
<template>
<div>
<form #submit.prevent="submit" autocomplete="off">
<div class="form-group d-flex mt-3">
<label for="zero" class="p-2 bg-info text-white redius-5">0</label>
<input style="width:100px;" min="0" class="form-control" name="zero" id="zero" v-model.number="zero" #click="doSum" v-model="fields.zero" oninput="validity.valid||(value=''); " />
<div v-if="errors && errors.zero" class="text-danger">{{ errors
.zero[0] }}</div>
<label for="one" class="p-2 bg-info text-white">1</label>
<input style="width:100px;" min="0" type="number" class="form-control" name="one" v-model.number="one" id="one" #click="doSum" v-model="fields.one" oninput="validity.valid||(value=''); "/>
<div v-if="errors && errors.one" class="text-danger">{{ errors.one[0] }}</div>
<label for="two" class="p-2 bg-info text-white">2</label>
<input style="width:100px;" min="0" type="number" class="form-control" name="two" v-model.number="two" id="two" #click="doSum" v-model="fields.two" oninput="validity.valid||(value=''); " />
<div v-if="errors && errors.two" class="text-danger">{{ errors.two[0] }}</div>
</div>
Total = {{ Bettotal }}
</form>
</div>
<script>
export default {
props: ['game_id', 'userId', 'this.rows'],
mounted() {
console.log('Component mounted.')
},
data() {
return {
timestamp: 0,
selectedGame: {},
gamesinfo: [],
zero:0,
one:0,
two:0,
Bettotal:0,
gamex: this.gameId,
rows: [],
count: 0,
fields: {},
errors: {},
success: false,
loaded: true,
};
},
doSum: function () {
this.Bettotal = parseInt(this.zero) + parseInt(this.one) + parseInt(this.two);
// if (isNaN(this.Bettotal)) this.Bettotal = 0;
return this.Bettotal;
},
};

Answer 1

In your total() method instead of
acc += parseInt(row.value)
try:
acc += (row.value - 0)
I think that simple hack should work because it will convert it to number when you subtract zero from empty string.

Answer 2

ok i have added a validator and now its not giving me NaN
oninput="this.value = Math.abs(this.value);