v-on：单击不工作的引导程序答案

【问题标题】：v-on:click not working bootstrapv-on：单击不工作的引导程序
【发布时间】：2018-10-18 22:46:09
【问题描述】：

最初我认为这是我如何根据this question 使用@click 指令的问题。我在指令中添加了.native，但我的方法仍然没有被调用。

我知道这是引导程序，就像我使用普通的 <button> 一样，然后按预期调用该方法。

日志中没有错误，所以就好像元素没有注册指令一样？

UpcomingBirthdays.vue

<template>
    <div>
        <h1>{{ section_title }}</h1>
        <b-card style="max-width: 20rem;"
                v-for="birthday in birthdays.birthdays"
                :key="birthday.name"
                :title="birthday.name"
                :sub-title="birthday.birthday">
            <b-button href="#"
                    @click.native="toWatch(birthday, $event)"
                    variant="primary">Watch
            </b-button>
        </b-card>
    </div>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        name: "UpcomingBirthdays",
        data: () => {
            return {
                section_title: "Upcoming Birthdays",
            };
        },
        methods: {
            toWatch: (birthday, event) => {
                event.preventDefault();
                console.log("watched called");
                console.log(birthday.name);
                console.log(`BEFORE: ${birthday.watch}`);
                birthday.watch = !birthday.watch;
                console.log(`AFTER: ${birthday.watch}`);
            }
        },
        computed: mapState([
            "birthdays",
        ]),
    };
</script>

<style>
</style>

编辑

值得一提的是，当使用 HTML5 <button> 时，我不必将 .native 属性附加到 @click 指令。

编辑 2

这是我为复制此错误而创建的codesandbox。我希望这里会出现一个错误，说 BirthdaysApi 未定义，但单击按钮时我什么也没得到。

【问题讨论】：

您可能必须将$event 作为第一个参数传递：vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers。如果这不起作用，您可以创建一个 MCVE 来向我们展示一个工作示例吗？如果您需要按原样使用您的代码，codesandbox.io 可能是创建概念验证示例的地方。
@Terry 这不是我之前尝试过的问题。我已经制作了一个代码框，并将编辑我的问题以包含
.native 仅适用于表单提交。它不会对表单外的普通按钮单击执行任何操作。
[Vue warn]: The computed property "birthdays" is already defined in data. found in ---> <UpcomingBirthdays> at /src/components/UpcomingBirthdays.vue <App> at /src/App.vue <Root>
github.com/bootstrap-vue/bootstrap-vue/issues/1146

标签： javascript vuejs2

【解决方案1】：

只需从您的按钮中删除 href="#"（这使得 Bootstrap b-button 组件将您的按钮呈现为锚点）并且它按预期工作：

https://codesandbox.io/s/w0yj3vwll7

编辑：

显然这是作者的故意行为，我不同意这个决定。他们正在做的显然是执行event.stopImmediatePropagation()，因此不会触发任何额外的侦听器。

https://github.com/bootstrap-vue/bootstrap-vue/issues/1146

【讨论】：