老文章了,目前用el-input v-model.number就能解决
很简单的操作,不知道当初在做什么,下文请直接忽略…
Vue.JS项目中v-model导致输入框中number类型值自动转换成string问题的解决方案。
####问题探讨
本人项目中有三个端,web、服务端、设备端,服务端在此项目中只是起到转发web端数据给设备的中介作用,web端数据直接由设备解析。设备端协议要求,web端下发数据时传的是JSON对象转化成的字符串,即这种格式:
,请留意其中的Chn
字段,转化后仍需要整形,而不是字符串。
由于项目中数据比较复杂,在此只举一个简单的例子:
如图,修改两个框的内容后,点击提交,随后JSON.stringify()
一下,要求此时输入框的内容还是整形。
<template>
<div class="hello">
<div class="item" v-for="(item, index) in CANS" :key="index">
<span>{{item.name}}</span>
<el-input v-model="item.FltCon.Chn"></el-input>
</div>
<el-button type="primary" @click="request">提交</el-button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
CANS: {
CAN0: {
name: '通道0',
FltCon: {
Chn: 666,
Enable: 0
}
},
CAN1: {
name: '通道1',
FltCon: {
Chn: 667,
Enable: 0
}
}
}
}
},
methods: {
request () {
let CANS = {
'CANS': JSON.stringify(this.CANS)
}
console.log(CANS)
// 请求后端此例省略
}
}
}
</script>
<style scoped>
.item {
display: flex;
margin-bottom: 10px;
}
.item span {
display: block;
width: 100px;
height: 40px;
line-height: 40px;
}
</style>
修改了输入框的内容,点击提交,会发现控制台输出的是:
留意其中的Chn
,会发现其值已经变成字符串,这与要求的不符,原因是在我们修改了输入框的值后,值被转成了字符串类型。
解决办法
以下只修改methods
部分
methods: {
request () {
this.formatData()
let CANS = {
'CANS': JSON.stringify(this.CANS)
}
console.log(CANS)
// 请求后端此例省略
},
formatData () {
for (let key in this.CANS) {
let CAN = {
name: this.CANS[key].name,
FltCon: {
Chn: parseInt(this.CANS[key].FltCon.Chn),
Enable: this.CANS[key].FltCon.Enable
}
}
this.CANS[key] = CAN
}
}
}
转换数据格式后,打印结果如下,符合协议。