vue在created异步请求数据，通过v-for渲染；在mounted中获取不到数据和Dom的解决方案

╰半夏微凉° 2022-11-27 00:41 307阅读 0赞

### 问题： ###

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