Vue2使用动态生成的ref名称访问子组件方法报错如何解决

核心结论 #

这是Vue2的预设行为，问题出在你对v-for场景下ref返回值的适配处理不到位，不是框架bug。

原因说明 #

Vue2对v-for循环内绑定的ref有特殊处理规则：无论你绑定的是静态ref还是动态拼接的ref名，$refs中对应key存储的永远是包含所有匹配该ref的DOM/组件实例的数组，而非单个实例。你当前直接从$refs取值后就调用validateForm，相当于在数组上调用不存在的方法，自然会抛出错误。

修复方案 #

方案1：适配数组取值逻辑 #

仅修改校验方法，从返回的数组中取第一个元素即可拿到真实组件实例：

validateAllForms() {
    return this.forms.find(form => {
        // v-for生成的ref为数组，取下标0获取单个实例，加可选链避免未渲染时报错
        const formComponent = this.$refs[`formRef${form.id}`]?.[0]
        return formComponent?.validateForm()
    })
}

方案2：简化为统一静态ref（更推荐） #

不需要为每个子组件拼接动态ref名，直接绑定同一个静态ref，$refs会自动按渲染顺序返回所有子组件的数组，和你的forms数组天然按下标一一对应，实现更简洁：
首先修改模板代码：

<SupportRequestForm v-for="(form, idx) in forms" :key="form.id"
    ...
    ref="formRefs"
/>

对应修改校验方法：

validateAllForms() {
    return this.forms.find((form, idx) => {
        const formComponent = this.$refs.formRefs?.[idx]
        return formComponent?.validateForm()
    })
}

注意事项 #

调用validateAllForms需要保证子组件已经完成渲染，不要在created等DOM未生成的生命周期钩子内调用，若在表单数组动态更新后立即校验，需要包裹在this.$nextTick回调中执行，避免$refs未完成赋值导致的报错。

内容的提问来源于stack exchange，提问作者mtepe