宽屏大气通用企业网站源码asp模板源码程序生成静态html,深圳网站建房,响应式网站页面设计,扬州公司网站建设问题现象 #x1f4a5;
在实现动态增减的单价输入表单时#xff08;基于uv-form组件#xff09;#xff0c;遇到以下诡异现象#xff1a;
uv-input的v-model绑定初始值为数字类型时#xff0c;required规则失效 ❌数字类型与字符串类型校验表现不一致 #x1…问题现象
在实现动态增减的单价输入表单时基于uv-form组件遇到以下诡异现象
uv-input的v-model绑定初始值为数字类型时required规则失效 ❌数字类型与字符串类型校验表现不一致
技术栈背景 ️
框架Vue3 uni-appUI库uv-ui校验方案计算属性动态生成规则
示意图 解决方案
1.优先使用字符串类型做表单绑定 2.添加自定义校验规则validator解决初始值问题
templateview classform-boxuv-form refrefForm :modelformvalue labelWidth100px :rulesrulesview classform-list-item v-for(item, index) in formvalue.detailList :keyindexuv-form-item borderBottom label单价 :propdetailList.${index}.amount requireduv-input inputAlignright typedigit v-modelitem.amount placeholder请输入单价 bordernonetemplate v-slot:suffix 元 /template/uv-input/uv-form-itemview classmt24 v-ifformvalue.detailList.length ! 1uv-button plain text移除click.stophandleDel(index) :customStyle{ height: 60rpx }/uv-button/view/view/uv-formview classpage-footeruv-button plain text新增 click.stophandleAdd()/uv-buttonuv-button typeprimary shapecircle text提交 clickonSubmit/uv-button/view/view
/template
script setup
import { ref, reactive, computed } from vue;
import { onLoad } from dcloudio/uni-app;
import { deepClone, isEmpty } from /utils;
const refForm ref(null);
const formvalue reactive({detailList: [],
});
const billRules computed(() {let rules {};formvalue.detailList.forEach((item, index) {rules[detailList.${index}.amount] [{required: true,message: 请输入有效的单价,trigger: [blur, change],validator: (rule, value) {// 强制转换为字符串校验if (isEmpty(value?.toString())) return false; const numValue Number(value);return !isNaN(numValue) numValue 0;}}];})return rules
});
const rules computed(() {return {...billRules.value}
});
const detailObj {amount: 10,
}
const handleAdd () {formvalue.detailList.push(deepClone(detailObj))
}
const handleDel (index) {formvalue.detailList.splice(index, 1)
}
onLoad(async () {handleAdd()
})
const onSubmit async () {refForm.value.validate().then(async () {})
}
/script
style langscss scoped
.form-box {margin-top: 180rpx;
}.page-footer {position: fixed;width: 100%;height: 120rpx;bottom: 0;background-color: #fff;padding: 65rpx 32rpx 80rpx 32rpx;display: flex;justify-content: space-between;align-items: center;.uv-button-box {flex: 1;margin: 0 12rpx;}
}
/style
