<u-form-item
v-for="item in fieldList"
:key="item.id"
:label="item.name"
:prop="item.field"
:required="item.required === 1"
>
<u-upload
:ref="item.field==='identity_card_front'?IDCard:
item.field==='identity_card_reverse'?NumCard:ErrorCard"
v-if="item.type === 'file' && item.isSelect === 2"
:action="uploader.url"
:file-list="uploader.fileList"
:maxCount="uploader.maxCount"
@on-success="
(data, index, lists, name) =>
uploader.onSuccess(data, index, lists, name, item.field, item.id)
"
@on-remove="uploader.onRemove"
:formData="idCardUploadParams(item.field)"
name="file"
/>
<u-input
v-if="item.type === 'string' && item.isSelect === 0"
v-model="form.formData[item.field]"
@input="handelInfo($event, item)"
/>
<u-input
v-if="item.type === 'date' && item.isSelect === 0"
type="select"
@click="handleOpenPicker(item)"
v-model="form.formData[item.field]"
/>
<u-input
v-if="item.type === 'string' && item.isSelect === 1"
type="select"
@click="changeSelect(item)"
v-model="form.formData[item.field]"
/>
<u-input
v-if="item.type === 'string' && item.isSelect === 3"
type="select"
@click="customEvent(item)"
v-model="form.formData[item.field]"
/>
</u-form-item>
const IDCard = ref();
const NumCard=ref();
const ErrorCard=ref();
const uploader = reactive({
url: uploadAddr,
fileList: [],
maxCount: 1,
onSuccess: (data, index, lists, name, field, id) => {
if (data?.data?.analysis?.result) {
form.formData[field] = data?.data?.path;
form.formData.data[id] = data?.data?.path;
console.log(fieldList,'fieldList');
uFormRef.value.validate();
} else {
uni.showToast({
title: "身份证上传有误",
icon: "error",
});
console.log(NumCard.value,IDCard.value,ErrorCard.value,'IDCard');
if (field==='identity_card_front') {
IDCard.value[index]?.clear();
}else if(field==='identity_card_reverse'){
NumCard.value[index]?.clear();
}else {
ErrorCard.value[index]?.clear();
}
}
},
onRemove: () => {},
});
我console.log(NumCard.value,IDCard.value,ErrorCard.value,'IDCard');在网页上能打印出来,但是在小程序当中全是undefined
问题:小程序不支持动态绑定ref
解决方法:把fieldlist循环的index传过去就行
<u-form-item
v-for="(item,fieldIndex) in fieldList"
:key="item.id"
:label="item.name"
:prop="item.field"
:required="item.required === 1"
>
<u-upload
ref="IDCard"
const IDCard = ref();
const uploader = reactive({
url: uploadAddr,
fileList: [],
maxCount: 1,
onSuccess: (data, index, lists, name, field, id,fieldIndex) => {
if (data?.data?.analysis?.result) {
form.formData[field] = data?.data?.path;
form.formData.data[id] = data?.data?.path;
console.log(fieldList,'fieldList');
uFormRef.value.validate();
} else {
uni.showToast({
title: "身份证上传有误",
icon: "error",
});
IDCard.value[fieldIndex]?.clear();
}
},
onRemove: () => {},
});