首页
前端开发
Vue 将 input[type=number] 转换为字符串值
Vue 将 input[type=number] 转换为字符串值
[英] Vue converts input[type=number] to a string value
本文介绍了Vue 将 input[type=number] 转换为字符串值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遇到了一个问题,Vue 将类型为 number 的输入字段的值转换为字符串,但我不知道为什么.我遵循的指南没有遇到这个问题,并按预期将值作为数字获取.
vue 文档说明,如果输入的类型是数字,Vue 会将值转换为数字.
代码源自一个组件,但我将其调整为在 JSFiddle 中运行:https://jsfiddle.net/d5wLsnvp/3/
<div class="col-sm-6 col-md-4"><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">{{股票名称}}<small>(价格:{{ stock.price }})</small>
<div class="panel-body"><div class="pull-left"><input type="number" class="form-control" placeholder="Quantity" v-model="quantity"/>
<div class="pull-right"><button class="btn btn-success" @click="buyStock">购买</button>
模板><脚本>导出默认{道具:['股票'],数据() {返回 {数量:0//初始化为 0 保持一个数字};},方法: {购买股票(){常量顺序 = {stockId: this.stock.id,stockPrice: this.stock.price,数量:this.quantity};控制台日志(顺序);this.quantity = 0;//重置为 0 是一个数字}}}
数量值是问题.它被初始化为 0,当我按下购买"按钮时,控制台显示:
Object { stockId: 1, stockPrice: 110, 数量: 0 }
但是一旦我通过使用微调器或仅输入新值来更改值,控制台就会显示:
Object { stockId: 1, stockPrice: 110, 数量: "1" }
已使用 Firefox 59.0.2 和 Chrome 65.0.3325.181 进行测试.两者都表示它们是最新的.我实际上也在 Microsoft Edge 中尝试过,结果相同.
那么我在这里错过了什么?为什么 Vue 不将值转换为数字?
解决方案
您需要使用 .number
v-model
的修饰符,像这样:
注意:空字符串(''
)不会转换成数字,可能需要单独处理.
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.
The vue docs state, that Vue would convert the value to a number, if the type of the input is number.
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>
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" }
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.
So what am I missing here? Why is Vue not converting the value to a number?
解决方案
You need to use .number
modifier for v-model
, like this:
<input v-model.number="quantity" type="number">
Note: empty string (''
) is not converted to a number, so you may need to handle it separately.
这篇关于Vue 将 input[type=number] 转换为字符串值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文