Vue将input [type = number]转换为字符串值 [英] Vue converts input[type=number] to a string value

问题描述

我遇到了问题，Vue将number类型的输入字段的值转换为字符串，我无法弄清楚原因。我所遵循的指南没有遇到这个问题，正如预期的那样得到值作为数字。

I'm running into the problem, that Vue converts the value of an input field of type number into a string and I just can't figure out why. The guide I am following along does not run into this issue and get's the values as numbers, as expected.

vue docs状态，Vue将值转换为a数字，如果输入的类型是数字。

The vue docs state, that Vue would convert the value to a number, if the type of the input is number.

代码来自一个组件，但我把它调整为在JSFiddle中运行： https://jsfiddle.net/d5wLsnvp/3/

The code is originated from a component, but I adjusted it to run in 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，当我按下购买按钮时，控制台显示：

The quantity value is the issue. It is initialized with 0 and when I just press the "Buy" button, the console shows:

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

但是一旦我改变了价值无论是使用微调器还是只输入新值，控制台都会显示：

But as soon as I change the value by either using the spinners or just type in a new value, the console will show:

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

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

Tested with Firefox 59.0.2 and Chrome 65.0.3325.181. Both state that they are up to date. I actually also tried it in Microsoft Edge, with the same result.

那么我在这里缺少什么？为什么Vue没有将值转换为数字？

So what am I missing here? Why is Vue not converting the value to a number?

推荐答案

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

You need to use .number modifier for v-model, like this:

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

这篇关于Vue将input [type = number]转换为字符串值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！