gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 13:50:43 24 4
gpt4 key购买 nike

我正在使用 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

最佳答案

你可以使用$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 可能是更好的选择。

关于javascript - 如何访问 Vue.js 中的动态元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58307875/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com