Vue.js 2.6.10中如何访问v-for生成的动态DOM元素？

这事儿我之前也碰到过，核心原因其实是异步数据更新和Vue DOM更新时机的不匹配，咱们一步步拆解：

为什么mounted里拿不到.foo元素？ #

mounted钩子触发时，组件的根元素（也就是this.$el）确实已经挂载到DOM里了，但你的Axios请求是异步的——当mounted执行的时候，请求还没返回，this.bars还是初始的空值，v-for根本没渲染出任何.foo元素。这时候用querySelectorAll自然拿不到东西，而this.$el能输出是因为它是组件的根容器，跟里面的子元素是否渲染无关。

为什么updated里可行但不想用？ #

updated是每次组件DOM更新后都会触发，当Axios请求返回、bars赋值完成，Vue更新DOM后，updated就会执行，这时候能拿到元素。但它会在任何DOM更新场景下触发（比如后续bars再变化），不符合你“只执行一次”的需求。

最优解决方案：请求成功后用$nextTick等待DOM更新 #

Vue修改数据后不会立刻更新DOM，而是把DOM更新操作放到下一个事件循环里批量执行。所以在你给this.bars赋值后，用this.$nextTick()就能等到DOM完全渲染完成，这时候再去拿元素就没问题了，而且只会执行一次。

代码示例（两种方式）：

方式1：用querySelectorAll

created() {
  axios('get/data').then(response => {
    this.bars = response.data;
    // 等待DOM更新完成
    this.$nextTick(() => {
      const fooElements = this.$el.querySelectorAll('.foo');
      // 这里就能正常调用getBoundingClientRect了
      fooElements.forEach(el => {
        console.log(el.getBoundingClientRect());
      });
    });
  });
}

方式2：用Vue的$refs（更推荐，更Vue化）

先给v-for的元素加ref：

<div class="foo" v-for="bar in bars" ref="fooElements">{{bar.text}}</div>

然后在请求成功后的$nextTick里直接拿refs：

created() {
  axios('get/data').then(response => {
    this.bars = response.data;
    this.$nextTick(() => {
      // this.$refs.fooElements是一个元素数组
      this.$refs.fooElements.forEach(el => {
        console.log(el.getBoundingClientRect());
      });
    });
  });
}

额外补充：用watch监听bars的变化（适合复杂场景） #

如果你的数据更新逻辑不是直接在created里，也可以用watch监听bars，当它从空变成有数据时执行一次逻辑，然后取消监听：

export default {
  data() {
    return {
      bars: []
    }
  },
  created() {
    axios('get/data').then(response => {
      this.bars = response.data;
    });
  },
  watch: {
    bars: {
      handler(newBars) {
        // 确保数据有内容再执行
        if (newBars.length) {
          this.$nextTick(() => {
            const fooElements = this.$el.querySelectorAll('.foo');
            // 执行你的逻辑
          });
          // 取消监听，避免后续bars变化时重复执行
          this.$watch('bars', () => {}, { immediate: false });
        }
      },
      immediate: true // 初始化时也触发一次
    }
  }
}

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