vue $refs 不能动态拼接的问题

呱呱•.•

于 2020-01-16 15:43:42 发布

阅读量4.6k

点赞数 1

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/alisa_lisa/article/details/104005063

版权

Vue 专栏收录该内容

16 篇文章

订阅专栏

本文解决在Vue中使用Element UI的动态表单与v-for结合时的验证问题，详细阐述了如何正确引用动态生成的表单元素进行验证，避免常见的$refs引用错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求：动态增减表单并验证

在这里插入图片描述

代码如下：

 <el-form
      label-width="110px"
      :inline="true"
      v-for="(item, i) in formData"
      :key="'add' + i"
      :ref="'addForm' + i"
      :rules="addRulse"
      :model="formData[i]"
    >
	...
    </el-form>


 this.contentReqVoList.forEach((el, i) => {
   console.log(this.$refs['addForm' + i])
   this.$refs.addForm['addForm' + i].validate(v => {
	...
   })
  })

错误如下
原因：

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候它们还不存在, $refs 也不是响应式的，不能在模板中做数据绑定；
当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。

修改代码如下：

 <el-form
      label-width="110px"
      :inline="true"
      v-for="(item, i) in formData"
      :key="'add' + i"
      ref="addForm"
      :rules="addRulse"
      :model="formData[i]"
    >
	...
    </el-form>

 this.contentReqVoList.forEach((el, i) => {
   this.$refs.addForm[i].validate(v => {
	...
   })
  })