Question

该问题说明了所有问题，但我在Buefy中有3个标签，前两个（摘要和详细信息）已覆盖并且可以按预期正常工作，但是第三个标签是注销按钮，因此当我单击它时，我想触发提醒（“”）的方法。

我的bufy标签仅来自标准页面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项中单击一下，但这没有用，文档说有一个事件：

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标签时如何触发方法？

1 个答案: