老文章了，目前用el-input v-model.number就能解決
很簡單的操作，不知道當初在做什么，下文請直接忽略…

Vue.JS項目中v-model導致輸入框中number類型值自動轉(zhuǎn)換成string問題的解決方案。
####問題探討
本人項目中有三個端，web、服務(wù)端、設(shè)備端，服務(wù)端在此項目中只是起到轉(zhuǎn)發(fā)web端數(shù)據(jù)給設(shè)備的中介作用，web端數(shù)據(jù)直接由設(shè)備解析。設(shè)備端協(xié)議要求，web端下發(fā)數(shù)據(jù)時傳的是JSON對象轉(zhuǎn)化成的字符串，即這種格式：
，請留意其中的Chn字段，轉(zhuǎn)化后仍需要整形，而不是字符串。
由于項目中數(shù)據(jù)比較復雜，在此只舉一個簡單的例子：

如圖，修改兩個框的內(nèi)容后，點擊提交，隨后JSON.stringify()一下，要求此時輸入框的內(nèi)容還是整形。

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

修改了輸入框的內(nèi)容，點擊提交，會發(fā)現(xiàn)控制臺輸出的是：

留意其中的Chn，會發(fā)現(xiàn)其值已經(jīng)變成字符串，這與要求的不符，原因是在我們修改了輸入框的值后，值被轉(zhuǎn)成了字符串類型。

解決辦法

以下只修改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}}}

轉(zhuǎn)換數(shù)據(jù)格式后，打印結(jié)果如下，符合協(xié)議。

總結(jié)

以上是生活随笔為你收集整理的Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。