Initially I thought this was an issue with how I was using the @click directive according to this question. I added the .native to the directive and my method is still not getting invoked.

I know this is bootstrap as if I use a normal <button> then the method is invoked as expected.

There are no errors in the logs so it is just as if the element is not registering the directive?

UpingBirthdays.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: "UpingBirthdays",
        data: () => {
            return {
                section_title: "Uping 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}`);
            }
        },
        puted: mapState([
            "birthdays",
        ]),
    };
</script>

<style>
</style>

EDIT

Worth mentioning that when using HTML5 <button>, I do not have to append the .native property to the @click directive.

EDIT 2

Here is my codesandbox I created to replicate this error. I would expect an error here to say BirthdaysApi is not defined but I am not getting anything when the button is clicked.

Initially I thought this was an issue with how I was using the @click directive according to this question. I added the .native to the directive and my method is still not getting invoked.

I know this is bootstrap as if I use a normal <button> then the method is invoked as expected.

There are no errors in the logs so it is just as if the element is not registering the directive?

UpingBirthdays.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: "UpingBirthdays",
        data: () => {
            return {
                section_title: "Uping 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}`);
            }
        },
        puted: mapState([
            "birthdays",
        ]),
    };
</script>

<style>
</style>

EDIT

Worth mentioning that when using HTML5 <button>, I do not have to append the .native property to the @click directive.

EDIT 2

Here is my codesandbox I created to replicate this error. I would expect an error here to say BirthdaysApi is not defined but I am not getting anything when the button is clicked.

• javascript
• vuejs2

Share Improve this question Follow edited May 8, 2018 at 22:41 wmash asked May 8, 2018 at 21:56 wmashwmash 4,20244 gold badges3838 silver badges7474 bronze badges 5

• You probably have to pass $event as the first argument: vuejs/v2/guide/events.html#Methods-in-Inline-Handlers. If that does not work, can you create an MCVE to show us a working example? If you need to use your code as-is, codesandbox.io might be the place to create a proof-of-concept example. – Terry Commented May 8, 2018 at 22:26
• @Terry that is not the problem as I have attempted that way before. I have made a codesandbox and will edit my question to include – wmash Commented May 8, 2018 at 22:39
• .native only matters for form submissions. It will do nothing for a normal button click outside of a form. – Korgrue Commented May 8, 2018 at 22:46
• 1 [Vue warn]: The puted property "birthdays" is already defined in data. found in ---> <UpingBirthdays> at /src/ponents/UpingBirthdays.vue <App> at /src/App.vue <Root> – connexo Commented May 8, 2018 at 22:47
• 1 github./bootstrap-vue/bootstrap-vue/issues/1146 – Phil Commented May 8, 2018 at 23:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Just remove the href="#" from your buttons (this makes the Bootstrap b-button ponent render your buttons as anchors) and it's working as expected:

https://codesandbox.io/s/w0yj3vwll7

Edit:

Apparently this is intentional behaviour from the authors, a decision I disagree upon. What they are doing is apparently executing event.stopImmediatePropagation() so any additional listener isn't triggered.

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