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

【问题标题】：How to trigger method when clicking a Buefy tabs?单击 Buefy 选项卡时如何触发方法？
【发布时间】：2019-05-29 22:30:51
【问题描述】：

问题说明了一切，但我在 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

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

【问题讨论】：

标签： javascript bulma buefy

【解决方案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>

【讨论】：