javascript - 如何访问 Vue.js 中的动态元素？

Question

我正在使用 v-for 创建一些 div:

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

div 的数据来自 Axios 请求:

created() {
  axios('get/data').then( response => {
    this.bars = response.data;
  });
}

这一切工作正常并正确呈现。

但是，一旦它们被创建，我想访问 div 以找出诸如 getBoundingClientRect 之类的东西，这就是我被卡住的地方。

我不明白为什么 this.$el.querySelectorAll('.foo') 在 this.$el 显然包含所有 .foo 时不起作用里面有div。我认为这与尚未更新的 DOM 有关，但我不明白其中一位如何工作而另一位却没有。

mounted() {
  console.log(this.$el); //Outputs all the .foo divs
  console.log(this.$el.querySelectorAll('.foo')); //Outputs empty array
}

在 updated() 中使用 this.$el.querySelectorAll('.foo') 工作正常，但我只需要运行一次代码，而不是每次都运行更新。

Vue版本是2.6.10

Answer 1

你可以使用$nextTick after 加载数据，它应该显示div标签

created() {
  axios('get/data')
  .then( response => {
    this.bars = response.data;

    this.$nextTick(() => {
        console.log(this.$el.querySelectorAll('.foo')); 
    });
  });
}

至于为什么你会出现看似奇怪的行为，我的理论是......

this.$el 记录一个对象，该对象即使在安装实例后也会不断更新。然而，this.$el.querySelectorAll 返回了当时的快照。

也就是说，应尽可能避免使用 this.$el.querySelectorAll 代替 $refs。但是你会看到同样的问题，如果你有动态生成的重复内容(比如使用 v-for 时)和/或如果你将它与另一个库连接，querySelectorAll 可能是更好的选择。