老文章了，目前用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}}}

轉換數據格式后，打印結果如下，符合協議。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。