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

Posted 2023-02-22

【中文标题】Vue 将 input[type=number] 转换为字符串值

【英文标题】：Vue converts input[type=number] to a string value

【发布时间】：2018-09-19 18:37:27

【问题描述】：

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

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 不将值转换为数字？

【参考方案1】：

将订单对象更改为：

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

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

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

【参考方案2】：

你需要使用.number modifier for v-model，像这样：

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

注意：空字符串（''）不会转成数字，可能需要单独处理。

【讨论】：

作为说明，我通过谷歌搜索[vue v-model number input]找到了它。这是最高的结果。

嗯，嗯，是的，它有效，我现在感觉有点愚蠢......我的搜索在 github 和 co 上返回了几个关于相同问题的线程，但没有任何解决方案，但该链接不在它......而且我使用的指南似乎已经过时......无论如何，感谢您的帮助

我不知道它是否以及何时起作用。可能是 Vue 1.0 的工作方式不同。不要太担心谷歌搜索不成功，每个人都会遇到这种情况。我添加了更多评论以供参考，因此您可以在此处查看哪个短语有效。

优秀的答案！我在互联网上找到的唯一一个，有效！ :) 谢谢+1

在不使用 v-model 的情况下有没有办法做到这一点？即当使用 vuex 时？