Ho to make tabs closable in a tabview

UI Components for Vue
Post Reply
marcotglb
Posts: 1
Joined: 14 May 2021, 13:11

17 Jun 2021, 09:01

It is not clear to me if it is possible in a tabview to have a clickable 'X' on every tab label in order to be able to dynamically close the tab.

I've tried using something like (see below) this but when I Click on 'X' button 2 events are generated:
- the click on the button
- the selection of the tab
these 2 events interphere in some way and produce some strange effect.

I was looking if somethin very simpler is already available in inthe TabView/TabPanel component itself.

Thanks!
Cheers

<TabView v-model:activeIndex="active" closable="true">
<TabPanel v-for="(tab, index) in tabs" :key="tab.title">
<template #header>
<i class="pi pi-calendar"></i>
<span>{{ tab.title }}</span>
<Button @click="onClick(index)">X</Button>
</template>
<component v-bind:is="tab.content" />
</TabPanel>
</TabView>

ironchan
Posts: 2
Joined: 24 Nov 2021, 00:41

24 Nov 2021, 01:14

Hi,
I'm trying to do the same thing and found the same effect where sometimes the button press event isn't registered.

Were you able to find a solution to this?

ironchan
Posts: 2
Joined: 24 Nov 2021, 00:41

24 Nov 2021, 02:18

Hi,

were you ever able to resolve this issue? I'm trying to do the same and am finding the same thing where the tab click registers first and sometimes the button press event isn't even called.

Thanks

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests