Vuetify v-btn 点击事件

Posted 2023-02-16

【中文标题】Vuetify v-btn 点击事件

【英文标题】：Vuetify v-btn click event

【发布时间】：2019-11-05 10:25:45

【问题描述】：

我正在使用 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);
               

但我无法在点击事件上调用 bookmarkSave() 方法。另外，我也尝试了 .native 选项。知道我的代码有什么问题吗？或者谁想告诉我使用 v-btn 组件上的点击事件

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

【问题讨论】：

您的组件的methods 部分中是否有bookmarkSave？你有多个methods 部分吗？

@StevenSpungin 是的，它在方法部分，我只有一个方法部分。

我认为这不是问题，但你不需要在@click 中使用 ()，除非你传递了你不需要的参数

你的方法被调用，问题是 axios 调用。在 axios 调用之前放一个日志。并向await 添加一个捕获处理程序。

如果您甚至无法从方法中记录一些简单的内容，则代码中的其他地方或组件中可能存在问题，甚至阻止代码正确到达那里

【参考方案1】：

https://github.com/vuetifyjs/vuetify/issues/35#issuecomment-269239541

当在组件上使用时，v-on 现在只监听该组件发出的自定义事件。要监听根元素上的原生 DOM 事件，可以使用 .native 修饰符。例如：

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

如果您有新问题，请点击 按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。

【参考方案2】：

我遇到了同样的问题。

我的解决方案是停止传播点击事件：

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

我有以下结构：

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

虽然单击列表项完美无缺，但单击按钮却不起作用。发生的事情是单击事件传播到列表项并将 showInput 重新设置为 true。

【参考方案3】：

将 .native 附加到 @click，因为 @click.native="func" 对我有用，因为底层组件本身没有此事件。

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

希望我能帮上忙！