老文章了，目前用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}}}
转换数据格式后，打印结果如下，符合协议。
