問題現象 💥

在實現動態增減的單價輸入表單時（基于uv-form組件），遇到以下詭異現象：

• <uv-input>的v-model綁定初始值為數字類型時，required規則失效 ?
• 數字類型與字符串類型校驗表現不一致 🔢

技術棧背景 🛠?

• 框架：Vue3 + uni-app
• UI庫：uv-ui
• 校驗方案：計算屬性動態生成規則

示意圖 🔍

解決方案 🚀

1.優先使用字符串類型做表單綁定
2.添加自定義校驗規則（validator）解決初始值問題

<template><view class="form-box"><uv-form ref="refForm" :model="formvalue" labelWidth="100px" :rules="rules"><view class="form-list-item" v-for="(item, index) in formvalue.detailList" :key="index"><uv-form-item borderBottom label="單價" :prop="`detailList.${index}.amount`" required><uv-input inputAlign="right" type="digit" v-model="item.amount" placeholder="請輸入單價" border="none"><template v-slot:suffix> 元 </template></uv-input></uv-form-item><view class="mt24" v-if="formvalue.detailList.length != 1"><uv-button plain text="移除"@click.stop="handleDel(index)" :customStyle="{ height: '60rpx' }"></uv-button></view></view></uv-form><view class="page-footer"><uv-button plain text="新增" @click.stop="handleAdd()"></uv-button><uv-button type="primary" shape="circle" text="提交" @click="onSubmit"></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 lang="scss" 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>