时间戳

首页 > 解决方案 > 输入值时获取 NaN

vue.js - 输入值时获取 NaN

问题描述

我试图从 2 个输入框计算一个值，然后得到这些输入框的总数。然后我试图获取我所有的金额并将它们总计并将它们添加到小计中，但我遇到的问题是，当我在第一个框中输入一个数字时，我的输出NaN不是 0，我想要它向我展示了一个 0。

这是我的代码

<template>
    <div class="content-header">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Unit</th>
                                                <th>Price</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            <tr v-for="product in products">
                                                <td>{{ product['name'] }}</td>
                                                <td>
                                                    <input type="text" class="form-control" v-model="unit[product['unit']]" @change="calculateCost(product['name'])">
                                                </td>
                                                <td>
                                                    <input type="text" class="form-control" v-model="price[product['price']]" @change="calculateCost(product['name'])">
                                                </td>
                                                <td>
                                                    {{ cost[product['name']] }}
                                                </td>
                                            </tr>

                                            <tr>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td>
                                                    Subtotal: {{ subTotal }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    props: [],
    data(){
        return {
            products: [],
            unit: {},
            price: {},
            cost: []
        }
    },
    computed:{
        subTotal(){
            if(this.cost!== null)
            {
                if(Object.keys(this.cost).length !== 0){
                    return  Object.keys(this.cost).reduce((carry, item) => {
                                carry+= Number(this.cost[item])
                                return carry;
                            }, Number(0))
                }else{
                    return 0;
                }
            }
        }
    },
    methods: {
        getProducts(){
            axios.get(`/api/product/all`).then(response => {
               this.products = response.data.products;
            });
        },
        calculateCost(item){
            this.cost[item] = Number(this.unit[item]) * Number(this.price[item]);
        },
    },
    mounted() {
        this.getProducts();
    }
}
</script>

标签： vue.js

解决方案

问题是v-modelforunit和price设置为与给定的键不同的键 to calculateCost()，这导致查找失败并导致NaN：

<input v-model="unit[product['unit']]" @change="calculateCost(product['name'])"> ❌
                             ^^^^^^                                   ^^^^^^
<input v-model="price[product['price']]" @change="calculateCost(product['name'])"> ❌
                              ^^^^^^^                                   ^^^^^^

<input v-model="unit[product['name']]" @change="calculateCost(product['name'])"> ✅
<input v-model="price[product['name']]" @change="calculateCost(product['name'])"> ✅

将键设置为product['name']确保正确查找unit和pricein calculateCost()。由于用户可以输入无效值（非数字字符串）或省略值，因此可以得到 get NaN，因此添加NaN-check in是个好主意calculateCost()：

calculateCost(item) {
  const unit = Number(this.unit[item]);
  const price = Number(this.price[item]);
  if (Number.isNaN(unit) || Number.isNaN(price)) return;
  this.cost[item] = unit * price;
},

此外，您可能希望成本对用户输入做出反应，因此请切换@change到@input：

<input v-model="unit[product['name']]" @input="calculateCost(product['name'])">
<input v-model="price[product['name']]" @input="calculateCost(product['name'])">

演示

推荐阅读