javascript Vue 将 input[type=number] 转换为字符串值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49748596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue converts input[type=number] to a string value
提问by Korashen
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 将类型为 number 的输入字段的值转换为字符串，但我不知道为什么。我正在遵循的指南没有遇到这个问题，并且按预期将值作为数字获取。
The vue docs state, that Vue would convert the value to a number, if the type of the input is number.
vue 文档指出，如果输入的类型是数字，则 Vue 会将值转换为数字。
The code is originated from a component, but I adjusted it to run in JSFiddle: https://jsfiddle.net/d5wLsnvp/3/
代码源自一个组件，但我将其调整为在 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>
The quantity value is the issue. It is initialized with 0 and when I just press the "Buy" button, the console shows:
数量价值是问题。它初始化为 0，当我按下“购买”按钮时，控制台显示：
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" }
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.
使用 Firefox 59.0.2 和 Chrome 65.0.3325.181 进行测试。两者都表示它们是最新的。我实际上也在 Microsoft Edge 中尝试过，结果相同。
So what am I missing here? Why is Vue not converting the value to a number?
那么我在这里错过了什么？为什么 Vue 不将值转换为数字？
回答by Frax
You need to use .numbermodifier for v-model, like this:
您需要使用.number修饰符 forv-model，如下所示：
<input v-model.number="quantity" type="number">
回答by Andreas Rau
Change the order object to :
将订单对象更改为：
const order = {
stockId: this.stock.id,
stockPrice: this.stock.price,
quantity: +this.quantity
};
This will automatically parse the string to a number.
这将自动将字符串解析为数字。
In general the data from HTML inputs are strings. The input type only checks if a valid string has been provided in the field.
通常，来自 HTML 输入的数据是字符串。输入类型仅检查字段中是否提供了有效字符串。
