如何从代码中删除 ParseInt NaN 问题？

Question

这是我的代码，我试图从输入值中获取总和。当我输入数字时它工作正常但是一旦我清除任何输入字段我得到总计为 NaN。我知道对数字值使用 parseInt 很麻烦，但如果我不使用 parseInt，它会附加数字而不是对输入值进行求和。我要解决吗？为什么要出现 NaN 以及如何使此代码无错误..不想将 if else 用于 NaN 或 IsNan 请提出实用方法 --

<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

在你的 total() 方法中而不是

acc += parseInt(row.value)

尝试：

acc += (row.value - 0)

我认为这个简单的 hack 应该可行，因为当您从空字符串中减去零时它会将其转换为数字。

Answer 2

好的，我已经添加了一个验证器，现在它不给我 NaN

oninput="this.value = Math.abs(this.value);

如何从代码中删除 ParseInt NaN 问题？

How to remove ParseInt NaN issues from the code?

laravel

vue.js

vuejs2