vue 引入vant-tabs组件，获取tab里面元素无法遍历？

  • Z时代
  • 2024-03-15
  • 分类：IT

  <div class="tab">
    <van-tabs v-model:active="tabActiveNumber" class="tabArray" animated background="#181818"
    color="liner-gradient(to right,#FF413F,#ED0022)" title-active-color="#E2E3E5"
    line-width="0.4rem" line-height="0.06rem" title-inactive-color="#8C8C8C">
      <van-tab v-for="(tab,index) in tabArray" :title="tab">
          <div class="rankingListBox content-box mescroll-touch">
              <div class="ranking-list-box" v-if="tabActiveNumber == 0"></div>
          </div>
      </van-tab>
    </van-tabs>
</div>

在mounted中打印

 const rankingListEl = document.getElementsByClassName("rankingListBox");
 console.log("-------------", rankingListEl, Array.from(rankingListEl));

vue 引入vant-tabs组件，获取tab里面元素无法遍历？

如图所示，无法遍历，也无法转换成数组？应该怎么修改呢？

回答：

遇事不决，就加个 nextTick

原理的话 tabArray 大概率是个异步数据

getElementsByClassName 是个可变数组，你可以 rankingListEl.length 看一下，应该是 0

因为 getElementsByClassName 获取的是可变的，加上 console 打印的快照，所以看上去 rankingListEl 是有值。而 Array.from 可以理解为浅拷贝，所以显示的是空

以上是 vue 引入vant-tabs组件，获取tab里面元素无法遍历？ 的全部内容， 来源链接： utcz.com/p/934691.html

回到顶部