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

分手后的思念是犯贱 2023-06-30 09:06 9阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]

*  **代码如下**：

<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 => { 
    	...
       })
      })

*  **错误如下**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]
 *  **原因**：

1.  因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候它们还不存在, $refs 也不是响应式的，不能在模板中做数据绑定；
2.  当 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 => { 
    	...
       })
      })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200116150449429.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200116153018410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FsaXNhX2xpc2E=,size_16,color_FFFFFF,t_70