Vue中v-for场景下通过$refs无法获取id值？求助解决

我来帮你排查一下这个常见的Vue使用坑，主要有两个核心原因，咱们一步步解决：

1. ref在v-for中会被处理为数组，而非单个值 #

当你在v-for循环的元素上绑定ref时，Vue不会把它存为单个对象，而是自动收集为一个数组。所以你直接打印this.$refs.dataInfo如果是数组就符合预期，而尝试直接取this.$refs.dataInfo.id会得到undefined——因为数组本身没有id属性，你需要遍历数组里的每一项来获取对应元素的id。

2. 访问时机不对：DOM还未渲染完成 #

如果是在created钩子函数里打印this.$refs，那必然是空对象，因为created阶段Vue还没开始渲染DOM，ref还未被挂载。你得等到mounted（首次DOM渲染完成）或者updated（数据更新后DOM重新渲染完成）钩子中访问。

另外，如果你的category数据是异步获取的（比如从接口请求），mounted时可能数据还未返回，v-for还没渲染元素，这时候refs也会是空的。这种情况需要在数据加载完成后再访问，或者用watch监听category的变化。

修复后的代码示例 #

JavaScript部分 #

// 在合适的生命周期钩子中访问refs
mounted() {
  // 先确认refs是否存在
  if (this.$refs.dataInfo) {
    // 遍历refs数组，获取每个item的id
    this.$refs.dataInfo.forEach(tabItem => {
      // 如果<tab-item>是自定义组件，需要通过$el访问DOM元素的id
      console.log('单个item的id:', tabItem.$el.id);
      // 如果<tab-item>是原生HTML元素（比如div），直接用tabItem.id即可
      // console.log('单个item的id:', tabItem.id);
    });
  }
},
// 针对异步加载的category数据，添加watch监听
watch: {
  category(newVal) {
    // 用$nextTick确保DOM更新完成后再访问refs
    this.$nextTick(() => {
      if (this.$refs.dataInfo) {
        this.$refs.dataInfo.forEach(tabItem => {
          console.log('异步加载后的item id:', tabItem.$el.id);
        });
      }
    });
  }
}

HTML部分（保持你的原有代码即可） #

<tab-item v-for="item in category" :id="item.id" ref="dataInfo">{{item.name}}</tab-item>

额外注意点 #

如果你的<tab-item>是自定义组件，要确保组件没有通过v-if或其他条件渲染导致未挂载，不然对应的ref也不会出现在数组里。

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