Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案

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
      }
    }
  }

转换数据格式后，打印结果如下，符合协议。