vue循环组件，循环设置ref问题

由于项目中，需要根据后台数据，动态渲染多个上传组件，感觉动态循环渲染组件挺有意思的，特记录一下

<snbc-image-upload-single 
        :canUpload="true" 
        :hasDelete="true"
        :isReallyDelete="false" 
        :falseDeletion="beforDelImgList" 
        :ref="item.itemField"
        :uploadTips="item.itemName" 
        :hasCountSchedule="false" 
        :maxUploadCount="1" 
        :isUseOldUpload="false" 
        :maxUploadSize="maxUploadSize"
        :isChooseImg="isChooseImg"
        @succChooseImg="watchSuccChooseImg"
        v-for="item of needImgItems"
        :key="item.itemField"
  >
</snbc-image-upload-single>

由于循环设置ref会得到一个数组，想要得到ref实例，需要取第一个元素，此处需要特别注意

// 完成巡检
completeReplenishment() {
    const imgList = [];
    this.needImgItems.forEach(v => {
        // [v.itemField] 对象中创建动态属性
        // this.$refs[v.itemField][0] v-for 循环组件，循环设置ref会得到一个数组，取ref，取第一个
        imgList.push(
                        {
                            name: v.itemName,
                            label: v.itemField,
                            value: this.$refs[v.itemField][0].imageOrgList
                        }
                    )
                })
        // 由于数据是后台返回的，而且是多条，此处需要循环判断，如果发现不满足条件，return出来
        for(var i=0; i<imgList.length; i++) {
            if (imgList[i].value.length === 0) {
                uni.showToast({
                        title: `请上传${imgList[i].name}图片`,
                            icon: 'none',
                        });
                      return; /*退出循环，代码不再放下去*/
              }
        }
}

至此，整个功能完成