Question

最初我认为这是我根据this question使用@click指令的问题。我将.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属性附加到@click指令。

编辑2

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

Answer 1

只需从按钮中移除href="#"（这会使Bootstrap b-button组件将按钮渲染为锚点）并且按预期工作：

https://codesandbox.io/s/w0yj3vwll7

编辑：

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

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

v-on：点击不工作的bootstrap

1 个答案: