单击Buefy选项卡时如何触发方法？

Question

问题说明了一切，但我在 Buefy 中有 3 个选项卡，前两个（摘要和详细信息）我已经了解并按预期正常工作，但第三个选项卡是注销按钮，所以当我单击它时我想要触发一个方法 alert("").

我的 buefy 标签只是来自标准页面 here，看起来像：

    <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>

我试过在 b-tab-item 中添加点击按钮，但这没有用，文档说有一个事件：

input   Triggers when tab is clicked    index: Number

但我不知道如何捕获已单击第三个选项卡以触发某些代码。

Answer 1

与所有 Vue 事件处理程序一样，@input 事件处理程序会自动将事件数据传递给您的方法。在这种情况下，作为 docs 状态，该事件数据只是单击的按钮选项卡的索引。

<template>
    <b-tabs type="is-toggle" expanded @input="doAlert">
        <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 {
        methods: {
            doAlert: function(index) {
                if (index === 2) alert('Index 2 is the third button');
            }
        }
    }
</script>

单击Buefy选项卡时如何触发方法？

How to trigger method when clicking a Buefy tabs?

javascript

bulma

buefy