如何在点击Buefy标签时触发方法？

Question

这个问题说明了一切，但我在Buefy中有3个选项卡，前两个(摘要和详细信息)我已经被覆盖，并按预期正常工作，但第三个选项卡是一个注销按钮，所以当我单击它时，我想触发一个方法来警告(“”)。

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