The question says it all but I have 3 tabs in Buefy, the first two (summary and details) I have got covered and work correctly as expected but the third tab is a logout button so when I click it I want to fire a method to alert("").

My buefy tabs are just from the standard page here and look like:

    <b-tabs type="is-toggle" expanded>
        <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
        <b-tab-item label="Music" icon="library-music"></b-tab-item>
        <b-tab-item label="Logout" icon="logout"></b-tab-item>
</b-tabs>

The question says it all but I have 3 tabs in Buefy, the first two (summary and details) I have got covered and work correctly as expected but the third tab is a logout button so when I click it I want to fire a method to alert("").

My buefy tabs are just from the standard page here and look like:

    <b-tabs type="is-toggle" expanded>
        <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
        <b-tab-item label="Music" icon="library-music"></b-tab-item>
        <b-tab-item label="Logout" icon="logout"></b-tab-item>
</b-tabs>

I have tried putting an on-click into the b-tab-item but that didn't work and the docs say there is an event:

input   Triggers when tab is clicked    index: Number

But I don't know how to capture that the third tab has been clicked to fire some code.

• javascript
• bulma
• buefy

1 Answer 1

As with all Vue event handlers, the @input event handler will automatically pass the event data to your methods. In this case, as the docs state, that event data is simply the index of the button tab clicked.

<template>
    <b-tabs v-model="activeTab" type="is-boxed" @input="tabClicked(activeTab)"
        <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
        <b-tab-item label="Music" icon="library-music"></b-tab-item>
        <b-tab-item label="Videos" icon="video"></b-tab-item>
    </b-tabs>
</template>

<script>
 export default {
  data() {
    return {
      activeTab: 0,
    };
  },
  methods: {
    tabClicked(index) {
      if (index === 2) alert('Index 2 is the third button');
    },
  },
};
</script>