[Vue]【解决】如何知道一个动态创建的元素加载完毕？

2024-06-13 15:13| 来源: 网络整理| 查看: 265

如何知道一个动态创建的元素加载完毕？问题来由：

使用Vue通过watch可以监测到某些变量的值的变化，同时对应进行一些操作。

我遇到的情况是：通过监测某个数组的变化来动态创建video元素，但是创建完想直接通过getElementById()来访问，结果获取到为null。

原因：

动态创建元素之后，DOM还没更新。

解决：

在创建元素完毕周、等到DOM更新完，才去访问这个元素。

怎么知道DOM更新完毕？

就用

this.$nextTick，用法：

this.$nextTick(() => { //你想要的操作.... });

比如在Vue中，监听某些值改变的之后的操作

watch:{ account:{ //account改变了, this.$nextTick(() => { //你想要的操作.... console.log("account="+account ); }); } },

参考：

1，How do I access dynamic elements in Vue.js?

https://stackoverflow.com/questions/58307875/how-do-i-access-dynamic-elements-in-vue-js

2，Vue.js中this.$nextTick()的使用

https://www.cnblogs.com/jin-zhe/p/9985436.html

感谢国内外各位博主无私的分享。

【本文地址】

今日新闻