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')显然包含所有.foo div时为什么this.$el不起作用。我认为这与尚未更新的DOM有关，但我不了解其中一点是如何工作的，而另一部分却没有。

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

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

Vue版本为2.6.10

Answer 1

使用vuejs更好地使用$ref

$Ref Documentation

<div ref="myElement"/>

mounted(){
  const { myElement} = this.$refs;
  console.log(myElement)
}

然后您可以对元素进行更多控制

Answer 2

您可以在加载数据后使用$nextTick ，该数据应显示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可能是一个更好的选择。

如何在Vue.js中访问动态元素？

2 个答案: