Switching between tabs Ant Design Vue

Question

I'm trying to make a switch between tabs but what happened is I can switch the tab but the Transferred tab disappear

<a-tabs :current="current" @change="onChange">
        <a-tab-pane key="1" v-if="current === 0">
            <span slot="tab">
                <a-icon type="folder-open" theme="twoTone" /> Pending ({{ pendingCount }})
            </span>

            <pending-list @go-to-transferred="nextTab" @dataCount="updatePendingCount" />
        </a-tab-pane>

        <a-tab-pane key="2" v-if="current === 1">
            <span slot="tab"><a-icon type="folder" theme="twoTone" />Transferred </span>

            <done-list @transferCount="updateTransferCount" />
        </a-tab-pane>

    </a-tabs>

export default {
    components: { PendingList, DoneList },
    data() {
        return {
            pendingCount: 0,
            transferCount: 0,
            current: 0,
        }
    },
    methods: {
        nextTab() {
            console.log('from Pending List');
            this.current = 1
        },
        onChange(current) {
            this.current = current
        },
        updatePendingCount(count) {
            console.log('Received count:', count);
            this.pendingCount = count;
        },
        updateTransferCount(count) {
            this.transferCount = count;
        },
    },
}
</script>

This is button from other component that I've tried to emit

download() {
      if (this.rowSelection.selectedRowKeys.length > 0) {
        this.$emit('go-to-transferred');

        this.$message.success('file exported!');
       
      } else {
        this.$message.warn("Select employee first!");
      }

    },

I am searching few tutorials but it didn't solve my problem.

Answer 1

Just using <template #tab> or <template v-slot:tab>,and removing v-if.

<a-tabs :current="current" @change="onChange">
  <a-tab-pane key="1">
    <template #tab>
      <span >
        <a-icon type="folder-open" theme="twoTone" /> Pending ({{ pendingCount }})
      </span>
    <template>
    <pending-list @go-to-transferred="nextTab" @dataCount="updatePendingCount" />
  </a-tab-pane>
  <a-tab-pane key="2">
    <template #tab>
      <span ><a-icon type="folder" theme="twoTone" />Transferred </span>
    <template>
    <done-list @transferCount="updateTransferCount" />
  </a-tab-pane>
</a-tabs>