vue在created异步请求数据,通过v-for渲染;在mounted中获取不到数据和Dom的解决方案
问题:// template<divclass="scheme-tab"v-for="(tab,index) in tabs":key="tab.id">// JSasync created() {this.tabs = await this.fetchSolutionTypes();console.log(JSON.stringify(this.tabs)); // 有数据},mou
·
问题:
// template
<div
class="scheme-tab"
v-for="(tab,index) in tabs"
:key="tab.id"
>
// JS
async created() {
this.tabs = await this.fetchSolutionTypes();
console.log(JSON.stringify(this.tabs)); // 有数据
},
mounted() {
console.log(JSON.stringify(this.tabs)); // 没有数据
console.log(document.getElementsByClassName("scheme-tab")); // 没有数据
}
目的:在created中异步获取到数据后,在template中通过v-for渲染;然后在mounted中获取到循环渲染的Dom节点。
但是在mounted中都获取不到;
在mounted当中使用 this.$nextTick 也不好用;
使用setTimeout,设置延时可以,但是在网速不好的情况下还是有问题。所以不推荐;
解决方法:
在watch当中监听tabs数组,然后在watch函数中,通过nextTick获取Dom节点;
watch: {
tabs: function (val) {
console.log(val); // 有数据
this.$nextTick(() => {
let curDom = document.getElementsByClassName("scheme-tab")[0]; // 有数据
});
}
},
async created() {
this.tabs = await this.fetchSolutionTypes();
console.log(JSON.stringify(this.tabs)); // 有数据
},
mounted() {
// console.log(JSON.stringify(this.tabs));
// console.log(document.getElementsByClassName("scheme-tab"));
}
更多推荐
已为社区贡献10条内容
所有评论(0)