Vue 将 input[type=number] 转换为字符串值

Question

我遇到了问题，Vue 将 number 类型的输入字段的值转换为字符串，我就是不知道为什么。 我遵循的指南没有遇到这个问题，并且按预期将值作为数字获取。

vue 文档指出，如果输入的类型是数字，Vue 会将值转换为数字。

该代码源自一个组件，但我将其调整为在 JSFiddle 中运行： https ://jsfiddle.net/d5wLsnvp/3/

<template>
    <div class="col-sm-6 col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">
                    {{ stock.name }}
                    <small>(Price: {{ stock.price }})</small>
                </h3>
            </div>
            <div class="panel-body">
                <div class="pull-left">
                    <input type="number" class="form-control" placeholder="Quantity" v-model="quantity"/>
                </div>
                <div class="pull-right">
                    <button class="btn btn-success" @click="buyStock">Buy</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['stock'],
        data() {
            return {
                quantity: 0 // Init with 0 stays a number
            };
        },
        methods: {
            buyStock() {
                const order = {
                    stockId: this.stock.id,
                    stockPrice: this.stock.price,
                    quantity: this.quantity
                };
                console.log(order);
                this.quantity = 0; // Reset to 0 is a number
            }
        }
    }
</script>

数量价值是问题。 它初始化为 0，当我按下“购买”按钮时，控制台显示：

Object { stockId: 1, stockPrice: 110, quantity: 0 }

但是，一旦我通过使用微调器或仅输入新值来更改值，控制台将显示：

Object { stockId: 1, stockPrice: 110, quantity: "1" }

使用 Firefox 59.0.2 和 Chrome 65.0.3325.181 测试。 两者都表示它们是最新的。 我实际上也在 Microsoft Edge 中尝试过，结果相同。

那么我在这里错过了什么？ 为什么 Vue 不将值转换为数字？

Answer 1

您需要为v-model使用.number修饰符，如下所示：

<input v-model.number="quantity" type="number">

注意：空字符串 ( '' ) 不会转换为数字，因此您可能需要单独处理。

Answer 2

将订单对象更改为：

const order = {
    stockId: this.stock.id,
    stockPrice: this.stock.price,
    quantity: +this.quantity
};

这将自动将字符串解析为数字。

通常，来自 HTML 输入的数据是字符串。 输入类型仅检查字段中是否提供了有效字符串。