v-for 与ref配合使用，this.$refs.key 返回的是组件数组

文章目录

• • 文章参考
  • 问题描述
  • 过程分析

文章参考

1. Vue 官网访问子组件实例或子元素
2. v-for中使用ref属性

问题描述

1. 工作中的项目需要选择人员和机构，已经封装为组件，可以选择机构和根据机构找人
2. 业务中需要动态添加多个个预约记录，一条预约记录中需要选择人员和相关机构，有的是多选，有的是单选
3. 添加的时候组件没有数据，可以用户选择
4. 编辑修改的时候，后台返回数据，组件要使用v-for循环，组件内部的值使用$refs去寻找，然后赋值给相关组件

过程分析

ref 使用简单说明

<base-input ref="usernameInput"></base-input>

this.$refs.usernameInput

ref 和 v-for 配合使用

1. 自己想着在v-for循环的时候，保证 ref的字符串唯一即可，这样就可以通过 this.$refs[唯一字符串]去找到组件，结果调试一直提示 undefined，异常报错

2. 找了同事一点一点的调试最后发现， this.$refs[唯一字符串] 返回的不是组件，而是一个组件数组对象

案例说明

官方解释：当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组。

this.$refs['caseInfo' + arrIndex][0].selectedId = tempFormData.caseDto.caseIndexCode