Vue.JS项⽬输⼊框中使⽤v-model导致number类型值⾃动转换成string问题。。
。
⽼⽂章了，⽬前⽤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)
// 请求后端此例省略
}
}
}
vuejson转对象</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
}
}
}
转换数据格式后，打印结果如下，符合协议。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。