vant的tabs加上swipeable或animated属性会出错

Question

vant的tabs加上swipeable或animated属性会出错

        <van-tabs v-model:active="active" sticky animated>
          <van-tab
            v-for="(item, index) in tabs"
            :title="item.title"
            :key="index"
          >
            <TabContent :indexName="index" />
          </van-tab>
        </van-tabs>

第一个tab会给TabContent 组件传入两个indexName 0和1，然后点击第二个tab之后传入的index变成了2 。
而不添加swipeable或animated就不会有这个问题，请问怎么解决呢？
vant的版本是 3.2.47

Answer 1

来自gpt的回答：
如果在van-tabs中没有开启swipeable或animated，那么切换标签页时并不会同时渲染所有标签页的内容，而是只会渲染当前激活的标签页的内容。因此，在这种情况下，每个TabContent组件对应的索引值就是唯一的。

如果在van-tabs中开启了swipeable或animated，那么所有标签页的内容都会被提前渲染出来，并进行缓存，这就导致了当你切换标签页时，由于所有内容都已经渲染出来了，所以不同的TabContent组件实例对应的索引值也可能是相同的，会出现问题。

为了解决这个问题，你可以考虑将TabContent组件中的indexName属性改为一个计算属性，根据当前激活的标签页动态计算得到，例如：

<template>
  <div>{{ index }}</div>
</template>

<script>
export default {
  props: {
    tabKey: String,
    tabs: Array
  },
  computed: {
    index() {
      return this.tabs.findIndex((item) => item.key === this.tabKey)
    }
  }
}
</script>

然后在父组件中将TabContent组件中的indexName属性改为tab.key，例如：

<van-tab
  v-for="(tab, index) in tabs"
  :title="tab.title"
  :key="index"
>
  <TabContent :tabKey="tab.key" :tabs="tabs" />
</van-tab>

这样，无论是否开启了swipeable或animated，都可以通过tab.key来动态计算得到每个TabContent组件实例对应的索引值，避免出现问题。