时间戳

首页 > 解决方案 > 如何访问 Vue.js 中的动态元素？

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

问题描述

我正在使用以下方法创建一些 div v-for：

<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，这就是我卡住的地方。

我不明白为什么在其中明确包含所有 .foo divthis.$el.querySelectorAll('.foo')时不起作用。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')inupdated()工作正常，但我只需要运行一次代码，而不是每次更新。

Vue 版本是 2.6.10

标签： javascriptvue.jsvuejs2

解决方案

用 vuejs 更好用$ref

$Ref 文档 

<div ref="myElement"/>

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

那么你对你的元素有更多的控制权

推荐阅读