Vuetify v-btn点击事件

Question

我正在使用vuetify，并且尝试单击v-btn组件时调用一个方法。但似乎不起作用。

这是我的代码：

<v-btn @click="bookmarkSave()">
    <v-icon v-if="!isBookmarked">bookmark_border</v-icon>
    <v-icon v-else>bookmark</v-icon>
</v-btn>

并且我在组件中（在方法部分中）声明了一个方法，如下所示：

bookmarkSave : async function () {
                  const response = await axios.get('api/bookmark-kaydet?voice_id=' + this.audio.id);
                 console.log(response);
               }

但是我无法在click事件上调用bookmarkSave（）方法。另外，我也尝试了.native选项。有什么想法我的代码有什么问题吗？或谁想让我使用v-btn组件上的click事件

当我单击按钮时，没有控制台错误或网络日志。我只能在vue工具上看到一些输出。我添加了一张有关的图片。

Answer 1

将@native附加到@click，因为@ click.native =“ func”对我有用，因为基础组件本身没有此事件。

您也可以将组件包装到具有此功能的本地html元素中，即div。

希望我能帮上忙！

Answer 2

我遇到了同样的问题。

对我来说，解决方案是停止传播click事件：

<v-btn @click.stop="showInput = false">

我具有以下结构：

<v-list> 
  <v-list-item @click="showInput = true">
     ....
     <v-btn @click="showInput = false">
     ....

在单击列表项时，它可以正常工作，但是，单击按钮不起作用。发生的事情是click事件传播到列表项，并将showInput重新设置为true。