Vue模板中访问动态命名ref参数，解决$refs.click调用报错问题

• 若使用Vue3版本，v-for循环内的动态ref默认会将匹配的DOM元素存入数组，而非直接映射为单个DOM节点。此时$refs['imgInput' + i]返回的是长度为1的数组，不是input元素本身，调用click方法自然会报错。
• 若使用Vue2版本，大概率是ref动态拼接的key和实际注册的key不匹配：v-for="i in 4"的遍历值i从1开始，若你的业务逻辑中存在从0开始的下标映射，会导致$refs['imgInput' + i]返回undefined，调用方法时报错。
• 额外可能：v-for未加唯一key导致Vue复用DOM，ref绑定的节点和预期不匹配。

Vue3 场景 #

临时修复方案 #

直接取ref数组的第一个元素调用click方法：

<button class="img-button" 
        @click="$refs['imgInput' + i][0].click()">+</button>

推荐优化方案 #

使用函数式ref直接绑定对应下标的DOM，避免动态key拼接的问题：

1. 模板中修改input的ref绑定：

<input style="display: none"
       type="file" 
       @change="selectImg(i, $event)"
       accept="image/*"
       :ref="el => { if(el) imgInputs[i] = el }">

2. script中声明存储ref的变量：

// 选项式API
data() {
  return {
    imgInputs: []
  }
}

// 组合式API
const imgInputs = ref([])

3. 按钮点击事件直接访问对应元素：

<button class="img-button" 
        @click="imgInputs[i].click()">+</button>

Vue2 场景 #

1. 首先给v-for的根元素加唯一key，避免DOM复用：

<div v-for="i in 4" :key="i" :class="(images[i] === null) ? 'not-removable' : 'removable'" class="img">

2. 若需要下标从0开始，调整遍历写法匹配ref拼接逻辑：

<div v-for="(item, index) in 4" :key="index">
  <input :ref="'imgInput' + index">
  <button @click="$refs['imgInput' + index].click()">+</button>
</div>

3. 可以加可选链做兼容，避免偶现的ref未初始化报错：

<button @click="$refs['imgInput' + i]?.click()">+</button>

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