4

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

我的 buefy 选项卡只是来自这里的标准页面，看起来像：

    <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

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

4

1 回答 1

6

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

<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>
于 2019-06-05T05:17:52.450 回答