uniapp中v-for循环ref踩坑

<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: () => {},
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值