uniapp 循环无法绑定动态ref如何解决？

在uniapp开发中遇到循环渲染时动态绑定ref无效的问题。例如使用v-for循环生成组件，尝试通过:ref="'item'+index"动态设置ref，但在this.$refs中无法获取到对应的组件实例。请问如何正确在循环中绑定和获取动态ref？官方文档没有明确说明这种情况下的解决方案。

2 回复

在uniapp中，动态ref可以通过以下方式解决：

  1. 使用函数设置ref：
<view v-for="(item, index) in list" :ref="el => { if(el) refs[index] = el }">
  1. 使用$refs访问：
this.$refs[`refName${index}`]
  1. 通过数据索引获取对应元素

注意：uniapp的ref获取时机可能比web端稍晚。


在 UniApp 中，循环（如 v-for）无法直接绑定动态 ref 是因为 Vue 2 的响应式系统限制。以下是解决方案：

方法一：使用 this.$refs 数组

在循环中绑定固定字符串 ref，通过索引访问：

<template>
  <view v-for="(item, index) in list" :key="index">
    <input :ref="'inputRef' + index" />
  </view>
</template>

<script>
export default {
  methods: {
    getRef(index) {
      return this.$refs['inputRef' + index][0]; // 注意：$refs 返回数组
    }
  }
}
</script>

方法二：使用函数 ref（推荐）

通过函数动态设置 ref 并保存到数据中：

<template>
  <view v-for="(item, index) in list" :key="index">
    <input :ref="el => setInputRef(el, index)" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputRefs: [] // 存储 ref
    }
  },
  methods: {
    setInputRef(el, index) {
      this.inputRefs[index] = el; // 直接保存 DOM 元素
    }
  }
}
</script>

注意事项：

  1. 在 H5 平台，this.$refs.xxx 返回数组；小程序端可能直接返回元素。
  2. 使用函数 ref 时，元素更新时会多次调用，可通过判断 el 是否存在处理。
  3. 确保在 mounted 或 nextTick 后访问 ref，避免未渲染完成。

推荐使用方法二，更简洁且跨平台兼容性好。

回到顶部