表单单选框关联两个值,上传的结果分别为数字0和数字1,但是勾选了,仍然无法通过验证,提示我们需要勾选
表单单选框关联的值是form.memberOnly,默认值为0
u-radio中的:name="item.value"关联的是u-radio-group中的 v-model="form.memberOnly"
<u-form-item label="仅会员可见" label-width='200' label-position="left" prop="memberOnly" :required="true">
<u-radio-group v-model="form.memberOnly" @change="radioGroupChange">
<u-radio @change="radioChange" v-for="(item, index) in memberOnlyList" :key="index"
:name="item.value">
{{item.name}}
</u-radio>
</u-radio-group>
</u-form-item>
let form = reactive({
name: '',
content:'', //产品介绍
memberOnly: 0, //1 仅会员可见,0:所有人可见
url: '', //上传的图片
// status:'0', //状态 正常
});
const memberOnlyList = reactive([{name:'是',value:1},{name:'否',value:0}])
// 选中某个单选框时,由radio时触发
const radioChange=(e)=> {
console.log('选-单',e);
}
// 选中任一radio时,由radio-group触发
const radioGroupChange=(e)=> {
console.log('选-全',e);
}
//设置的表单规则
const rules = reactive({
memberOnly: {
required: true,
message: "请选择是否会员可见",
trigger: "blur"
},
})
值为 0
值为1
原因:这里我暂时没找到什么原因,欢迎大家补充解答
解决方法:1.如果非必要上传数字,可以将值换成字符串
let form = reactive({
memberOnly: '0', //1 仅会员可见,0:所有人可见
});
const memberOnlyList = reactive([{name:'是',value:'1'},{name:'否',value:'0'}])
可以通过验证:
方法2:
如果必须上传数字,则需要在表单验证规则rules中写上它的类型:
加上该值的类型 type: 'number', 验证也可以通过
memberOnly: {
type: 'number',
required: true,
message: "请选择是否会员可见",
trigger: "blur"
},