vue3中使用vant4X的van-tabs组件踩的坑

vue3中使用vant4X的van-tabs组件踩到的坑

描述经过，到解决问题

今天突然接到需求要求在tabs使用过程中加上倒计时后返回到首个标签，之前看到文档有`v-model`，觉得一下就能解决的事情,一试肯定失败了，于是我开始查阅文档写法没问题，只能百度找同仁们了，经过一早上的翻阅终于在一个博客的评论区被我找到了答案。

错误案例

<template>
    <van-tabs v-model="activeName">
      <van-tab v-for="(item,index) in list" :key="index" :name="item.name" :title="item.name" />
    </van-tabs>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, onUpdated } from 'vue';
let list = ref([
  {
    name:'1'
  },
  {
    name:'2'
  },
  {
    name:'3'
  },
  {
    name:'4'
  }
])
let activeName = ref('2')
</script>

就这没简单的 一段代码中竟然有2个bug你敢信
下图是官方案例：


按照官网实际案例实现图：
我代码中选择的应该是**“2”**

正确使用方法

<template>
    <van-tabs v-model:active="active">
      <van-tab v-for="(item,index) in list" :key="index" :name="index+1" :title="item.name" />
    </van-tabs>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, onUpdated } from 'vue';
let list = ref([
  {
    name:'1'
  },
  {
    name:'2'
  },
  {
    name:'3'
  },
  {
    name:'4'
  }
])
let active = ref(3)
</script>

效果 我的active = ref(3)：

注意的地方

1、active 只支持 Number 类型
2、v-model 需要绑定名称 v-model:active = active

希望对各位同仁有帮助！