Изначально я думал, что это проблема с тем, как я использовал директиву @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>
EDIT
Стоит отметить, что при использовании HTML5 <button> мне не нужно добавлять свойство .native к директиве @click.
РЕДАКТИРОВАТЬ 2
Вот мои коды и коробка Я создал, чтобы повторить эту ошибку. Я ожидаю, что здесь появится сообщение о том, что BirthdaysApi не определено, но я ничего не получаю при нажатии кнопки.