uni-app 后台页面输入数字在最新版HBuilderX上竟然变成了string类型？

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app 后台页面输入数字在最新版HBuilderX上竟然变成了string类型？ 产品分类：HbuilderX
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：Windows 10 专业版
HBuilderX版本号：3.99

示例代码：

<template>
  <view class="uni-container">
    <uni-forms ref="form" :model="formData" validateTrigger="bind" labelWidth="90px">
      <uni-forms-item name="title" label="商品标题" required>
        <uni-easyinput placeholder="商品标题" v-model="formData.title" trim="both"/>
      </uni-forms-item>
      <uni-forms-item name="primaryImage" label="商品主图" required>
        <uni-file-picker file-mediatype="image" file-extname="jpg,png" return-type="object" v-model="formData.primaryImage"/>
      </uni-forms-item>
      <uni-forms-item name="images" label="商品轮播图" required>
        <uni-file-picker file-mediatype="image" file-extname="jpg,png" :limit="6" return-type="array" v-model="formData.images"/>
      </uni-forms-item>
      <uni-forms-item name="classify" label="商品类别" required>
        <uni-data-picker v-model="formData.classify" collection="lingshi_classify" field="name as value, name as text"/>
      </uni-forms-item>
      <uni-forms-item name="price" label="商品价格" required>
        <uni-easyinput placeholder="商品价格，单位为分" type="number" v-model="formData.price"/>
      </uni-forms-item>
      <uni-forms-item name="stockQuantity" label="商品库存">
        <uni-easyinput placeholder="商品库存" type="number" v-model="formData.stockQuantity"/>
      </uni-forms-item>
      <uni-forms-item name="soldNum" label="已售数量">
        <uni-easyinput placeholder="已售数量" type="number" v-model="formData.soldNum"/>
      </uni-forms-item>
      <uni-forms-item name="tagList" label="商品标签">
        <uni-easyinput placeholder="商品标签，以中文逗号分隔" v-model="formData.tagList"/>
      </uni-forms-item>
      <uni-card title="商品详情" :image-styles="{'height': '500rpx','width' : '300rpx'}" margin="0">
        <uni-forms-item name="describes" label="商品信息" required>
          <textarea :maxlength="-1" auto-height placeholder="标题:内容,(符号全以中文书写,多个信息以逗号分隔)"
            @input="binddata('describes', $event.detail.value)" class="uni-textarea-border"
            v-model="formData.describes"/>
        </uni-forms-item>
        <uni-forms-item name="detaiLimages" label="商品详情图" required>
          <uni-file-picker file-mediatype="image" file-extname="jpg,png" :limit="6" return-type="array" v-model="formData.detaiLimages"/>
        </uni-forms-item>
      </uni-card>
      <view class="uni-button-group">
        <button type="primary" class="uni-button" style="width: 100px;" @click="submit">提交</button>
        <navigator open-type="navigateBack" style="margin-left: 15px;">
          <button class="uni-button" style="width: 100px;">返回</button>
        </navigator>
      </view>
    </uni-forms>
  </view>
</template>

<script>
import { validator } from '../../js_sdk/validator/lingshi_goods_details.js';

const db = uniCloud.database();
const dbCmd = db.command;
const dbCollectionName = 'lingshi_goods_details';

function getValidator(fields) {
  let result = {}
  for (let key in validator) {
    if (fields.includes(key)) {
      result[key] = validator[key]
    }
  }
  return result
}

export default {
  data() {
    let formData = {
      "title": "",
      "primaryImage": null,
      "images": [],
      "classify": "",
      "price": 999,
      "stockQuantity": 100,
      "soldNum": 50,
      "tagList": null,
      "describes": null,
      "detaiLimages": null
    }
    return {
      formData,
      formOptions: {},
      rules: getValidator(Object.keys(formData))
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    /**
     * 生成skuId唯一标识方法
     */
    getSkuId () {
      const time = Date.now()
      return String(time)
    },

    /**
     * 验证表单并提交
     */
    submit() {
      uni.showLoading({
        mask: true
      })
      this.$refs.form.validate().then((res) => {
        if(res.tagList && res.tagList.trim()){
          let tagList = []
          res.tagList.split('，').forEach((item) => {
            if(item.trim()) tagList.push(item.trim())
          })
          if(tagList.length>0) {
            res.tagList = tagList
          } else {res.tagList = null}
        }else{res.tagList = null}
        if(res.price){
          const cent_price = res.price*100
          res.price = cent_price
        }
        if(res.stockQuantity){
          const stockQuantity = res.stockQuantity
          if(typeof(stockQuantity)=='string') res.stockQuantity = parseInt(stockQuantity)
        }
        if(res.soldNum){
          const soldNum = res.soldNum
          if(typeof(soldNum)=='string') res.soldNum = parseInt(soldNum)
        }
        if(res.describes && res.describes.trim()){
          const desc_list = res.describes.split('，')
          if (desc_list.length>0){
            let desc_obj = {}
            let describes = []
            desc_list.forEach((item) => {
              if(item.trim()){
                try {
                  const desc_obj_str = item.split('：')
                  const title = desc_obj_str[0].trim()
                  const content = desc_obj_str[1].trim()
                  if (!title || !content) {
                    uni.showToast({
                      icon: 'error',
                      title: '商品信息格式错误'
                    })
                    throw '商品信息格式错误';
                  }
                  desc_obj['title'] = title
                  desc_obj['content'] = content
                  describes.push(desc_obj)
                  desc_obj = {}
                }catch (e) {
                  uni.showToast({
                    icon: 'error',
                    title: '商品信息格式错误'
                  })
                  throw e;
                }
              }
            })   
            if(describes.length>0){
              res.describes = describes
            }else{throw '商品信息格式错误';}
          }
          res['skuId'] = this.getSkuId()
        }else{
          uni.showToast({
            icon: 'error',
            title: '商品信息格式错误'
          })
          throw '商品信息格式错误';
        }
        console.log(res.describes)
        return this.submitForm(res)
      }).catch((e) => {
        console.log(e)
      }).finally(() => {
        uni.hideLoading()
      })
    },

    /**
     * 提交表单
     */
    submitForm(value) {
      return db.collection(dbCollectionName).add(value).then((res) => {
        uni.showToast({
          title: '新增成功'
        })
        this.getOpenerEventChannel().emit('refreshData')
        setTimeout(() => uni.navigateBack(), 500)
      }).catch((err) => {
        uni.showModal({
          content: err.message || '请求服务失败',
          showCancel: false
        })
      })
    }
  }
}
</script>

操作步骤：

{
  "bsonType": "object",
  "description": "商品详情",
  "required": ["title","primaryImage","images","classify","price","desc","describes","detaiLimages"],
  "permission": {
    "read": false,
    "create": false,
    "update": false,
    "delete": false,
    "count": true
  },
  "properties": {
    "_id": {
      "description": "ID，系统自动生成"
    },
    "skuId": {
      "description": "商品唯一标识id，提交表单时自动生成"
    },
    "title": {
      "description": "商品标题",
      "bsonType": "string",
      "title": "商品标题",
      "trim": "both",
      "minLength": 3,
      "maxLength": 30
    },
    "primaryImage": {
      "description": "商品主图",
      "bsonType": "file",
      "title": "商品主图",
      "fileMediaType": "image",
      "fileExtName": "jpg,png"
    },
    "images": {
      "description": "详情页商品轮播图",
      "bsonType": "array",
      "arrayType": "file",
      "title": "商品轮播图",
      "multiple": true,
      "fileMediaType": "image",
      "fileExtName": "jpg,png",
      "minLength": 0,
      "maxLength": 6
    },
    "classify": {
      "bsonType": "string",
      "description": "商品类别名称， 参考<code>lingshi_classify</code> 表",
      "title": "商品类别",
      "foreignKey": "lingshi_classify.name",
      "enum": {
        "collection": "lingshi_classify",
        "field": "name as value, name as text"
      }
    },
    "price": {
      "description": "商品价格，单位为元",
      "bsonType": "double",
      "title": "商品价格",
      "minimum": 0.5,
      "maximum": 100000
    },
    "stockQuantity": {
      "description": "商品库存",
      "bsonType": "int",
      "title": "商品库存"
    },
    "soldNum": {
      "description": "已售数量",
      "bsonType": "int",
      "title": "已售数量"
    },
    "tagList": {
      "description": "商品标签，以中文逗号分隔",
      "bsonType": "array",
      "arrayType": "string",
      "title": "商品标签"
    },
    "describes": {
      "bsonType": "array",
      "arrayType": "object",
      "description": "商品信息",
      "title": "商品信息",
      "properties": {
        "title": {
          "bsonType": "string",
          "title": "标题",
          "trim": "both"
        },
        "content": {
          "bsonType": "string",
          "title": "内容",
          "trim": "both"
        }
      }
    },
    "detaiLimages": {
      "description": "商品详情图",
      "bsonType": "array",
      "arrayType": "file",
      "title": "商品详情图",
      "multiple": true,
      "fileMediaType": "image",
      "fileExtName": "jpg,png",
      "minLength": 0,
      "maxLength": 6
    },
    "create_date": {
      "bsonType": "timestamp",
      "label": "服务器端创建时间",
      "forceDefaultValue": {
        "$env": "now"
      },
      "componentForEdit": {
        "name": "uni-dateformat"
      }
    },
    "update_date": {
      "bsonType": "timestamp",
      "label": "用户端更新时间"
    }
  }
}

预期结果：

如标题


## 实际结果：


如标题

1 回复

在 uni-app 中，如果你在后台页面输入数字时发现其类型变成了 string，这可能是由于以下几个原因导致的：

1. 输入框的默认行为

  • 在 HTML 中，<input> 元素的 type="text" 或 type="number" 默认会将用户输入的内容作为字符串处理。即使你设置了 type="number"，输入框的值仍然会被作为字符串返回。
  • 如果你使用的是 uni-app 的 input 组件，默认情况下，v-model 绑定的值也会是字符串类型。

2. v-model 绑定

  • 如果你使用了 v-model 来绑定输入框的值，默认情况下，v-model 会将输入框的值作为字符串处理。即使你输入的是数字，它也会被转换为字符串。

3. 数据类型转换

  • 如果你需要将输入的值作为数字处理，你需要在获取到输入值后手动将其转换为数字类型。可以使用 parseInt、parseFloat 或 Number 等方法进行转换。

解决方案

1. 手动转换数据类型

你可以在获取到输入值后，手动将其转换为数字类型：

<template>
  <input v-model="inputValue" type="number" @input="handleInput" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    handleInput(event) {
      // 将输入值转换为数字
      this.inputValue = Number(event.target.value);
    }
  }
};
</script>

2. 使用 v-model.number 修饰符

uni-app 支持 v-model 的 .number 修饰符，它会在输入时将值自动转换为数字类型：

<template>
  <input v-model.number="inputValue" type="number" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: 0
    };
  }
};
</script>
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！