javascript - v-on :click not working bootstrap

Question

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

我知道这是 Bootstrap ，就好像我使用普通的 <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属性(property)给@click指令。

编辑 2

这是我的 codesandbox我创建是为了复制这个错误。我希望这里有一个错误说 BirthdaysApi未定义，但单击按钮时我没有得到任何东西。

Answer 1

只需从您的按钮中删除 href="#"(这会使 Bootstrap b-button 组件将您的按钮呈现为 anchor )并且它会按预期工作:

https://codesandbox.io/s/w0yj3vwll7

编辑:

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

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