vue $refs 不能動態拼接的問題

項目需求：動態增減表單並驗證

• 代碼如下：

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

• 錯誤如下
  
• 原因：

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