Vue中如何为三个div设置ref并获取元素数组？为何获取结果为空？

你遇到的核心问题是Vue2中，非v-for循环下的相同ref不会自动生成数组，直接写多个相同ref时，$refs只会保留最后一个匹配的DOM元素，你说获取到空大概率是拼写失误或者极端渲染时机问题，但本质是这种写法不符合Vue的ref规则。

正确实现方式 #

方式1：用v-for渲染元素（推荐）

只有当ref绑定在v-for循环生成的元素上时，Vue才会自动将this.$refs.newsletterElement处理为包含所有对应元素的数组：

<template>
  <div class="container">
    <div ref="newsletterElement" v-for="num in 3" :key="num">
      Element{{ num }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  mounted() {
    const elements = this.$refs.newsletterElement;
    console.log(elements); // 输出包含3个div元素的数组
  }
}
</script>

方式2：手动通过类名获取元素

如果不想用v-for，可以给这些div统一加class，然后用原生DOM API获取：

<template>
  <div class="container">
    <div class="newsletter-element">
      Element1
    </div>
    <div class="newsletter-element">
      Element2
    </div>
    <div class="newsletter-element">
      Element3
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  mounted() {
    const elements = document.querySelectorAll('.newsletter-element');
    // 如需转为数组，可使用 Array.from(elements) 或 [...elements]
    console.log(elements);
  }
}
</script>

为什么原写法不行？ #

Vue2的ref机制规则：

• 当ref绑定在单个普通DOM元素上，$refs对应的是该DOM元素；
• 当ref绑定在v-for循环的元素上，$refs会自动生成数组，包含所有循环生成的元素；
• 直接手动写多个相同ref的非循环元素，$refs只会存储最后一个被渲染的元素，不会生成数组。

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