vant Tab 标签页 事件自定义参数

Question

<van-tabs v-model="active" animated @click="onClick">

        <van-tab v-for="(item,index) in dome" :title="item.test" :key="index"  ></van-tab>

</van-tabs>

vant里面的tabs事件参数是固定的索引

下面是我想要的

<van-tabs v-model="active" animated >

        <van-tab v-for="(item,index) in dome" @click="onClick(item.id)" :title="item.test" :key="index"  ></van-tab>

</van-tabs>
dome:[

    {
      id:1,
      test:"a",
    },
     {
      id:2,
      test:"b",
    },
     {
      id:3,
      test:"c",
    },
     {
      id:4,
      test:"d",
    },
 ]




 
 
 

Answer 1

使用title插槽自定义选项卡的title，然后click事件放自定义的title上面，传入的item里面有你想要的所有信息

<van-tabs v-model="active">
  <van-tab v-for="(item,index) in tabs">
    <div class="tab-title" slot="title" @click="onClick(item)">{{ item.title }}</div>
    <div class="tab-content">{{ item.content }}</div>
  </van-tab>
</van-tabs>

tabs: [
    {
    id: '1',
    title: '选项一',
    content: '选项一内容'
  },
  {
    id: '2',
    title: '选项二',
    content: '选项二内容'
  }
]