问题:

// 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")); 
}

 

Logo

前往低代码交流专区

更多推荐