How can i add click event to overwrite IonTabButton changeTab()

I want like to open a picker when tab 2 is selected but seems like IonTabButton onClick will trigger changeTab(). Is there any way to overwrite this?

<template>
  <ion-page>
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="tab1" href="/tabs/tab1">
          <ion-icon :icon="triangle" />
          <ion-label>Tab 1</ion-label>
        </ion-tab-button>
          
        <ion-tab-button @click="openPicker">
          <ion-icon :icon="ellipse" />
          <ion-label>Tab 2</ion-label>
        </ion-tab-button>
        
        <ion-tab-button tab="tab3" href="/tabs/tab3">
          <ion-icon :icon="square" />
          <ion-label>Tab 3</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-page>
</template>

<script>
import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage } from '@ionic/vue';
import { ellipse, square, triangle } from 'ionicons/icons';

export default {
  name: 'Tabs',
  components: { IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
  setup() {
    return {
      ellipse, 
      square, 
      triangle,
    }
  },
  methods: {
    async openPicker() {
      const options = {
        buttons: [
          {
            text: "Cancel",
            role: 'cancel'
          },
          {
            text:'Confirm',
            handler:(selected) => {
              console.log(selected);
            }
          }
        ],
        columns:[{
          name:'animal',
          options:[
              { text: 'Dog', value: 'd'},
              { text: 'Cat', value: 'c'},
              { text: 'Mice', value: 'm'}
           ]
         }]
      };

      const picker = await this.$ionic.pickerController.create(options);
      picker.present();
    }
  }
}
</script>

1 post - 1 participant

Read full topic