uni-app uni-easyinput type绑的是number 提交验证前提交验证后都变成了文本

开发环境	版本号	项目创建方式
Mac	Sequoia 15.3.1	HBuilderX

操作步骤：

验证前，this.formData: {“goods_retailPrice”:“9900”,“goods_livePrice”:“3200”,“goods_commission”:“23”,“goods_teamCommission”:“30”,“goods_shipments”:“48小时”,“goods_express”:"",“goods_freightInsurance”:true,“goods_freeShipping”:true,“goods_SevenDaysProtection”:true,“goods_sellerNote”:""}
VM1038 oS+z:275

验证后，this.formData: {“goods_retailPrice”:“9900”,“goods_livePrice”:“3200”,“goods_commission”:“23”,“goods_teamCommission”:“30”,“goods_shipments”:“48小时”,“goods_express”:"",“goods_freightInsurance”:true,“goods_freeShipping”:true,“goods_SevenDaysProtection”:true,“goods_sellerNote”:""}

预期结果：

验证前，this.formData: {“goods_retailPrice”:19900,“goods_livePrice”:12000,“goods_commission”:20,“goods_teamCommission”:30,“goods_shipments”:“48小时”,“goods_express”:"",“goods_freightInsurance”:true,“goods_freeShipping”:true,“goods_SevenDaysProtection”:true,“goods_sellerNote”:""}

实际结果：

bug描述：

<uni-easyinput placeholder="商品零售价，输入整数，要注意：【单位为分！】。" type="number"  
    v-model="formData.goods_retailPrice"></uni-easyinput>  
数据定义：  
data() {  
    let formData = {  
        "goods_retailPrice": 0,  
        "goods_livePrice": 0,  
        "goods_commission": 0,  

提交按钮：  
async submit() {  
    uni.showLoading({  
        mask: true  
    })  

    await this.$refs.file.upload();  

    console.log("验证前，this.formData: " + JSON.stringify(this.formData));  

    this.$refs.form.validate().then((res) => {  
        console.log("验证后，this.formData: " + JSON.stringify(this.formData));  
        return this.submitForm(res)  
    }).catch(() => {}).finally(() => {  
        uni.hideLoading()  
    })  
},

更多关于uni-app uni-easyinput type绑的是number 提交验证前提交验证后都变成了文本的实战教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼

更多关于uni-app uni-easyinput type绑的是number 提交验证前提交验证后都变成了文本的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这是一个典型的表单数据类型转换问题。uni-easyinput的type="number"在输入时会限制只能输入数字，但实际绑定到v-model的值仍然是字符串类型。

解决方案：

在提交前手动转换数据类型：

this.formData.goods_retailPrice = Number(this.formData.goods_retailPrice)

或者使用计算属性自动转换：

computed: {
  formDataNumber() {
    return {
      ...this.formData,
      goods_retailPrice: Number(this.formData.goods_retailPrice),
      goods_livePrice: Number(this.formData.goods_livePrice),
      goods_commission: Number(this.formData.goods_commission)
    }
  }
}

也可以在v-model上使用修饰符：

<uni-easyinput v-model.number="formData.goods_retailPrice" type="number" />

uni-app uni-easyinput type绑的是number 提交验证前 提交验证后 都变成了文本

操作步骤：

预期结果：

实际结果：

bug描述：

uni-app uni-easyinput type绑的是number 提交验证前提交验证后都变成了文本