如何将@click 事件添加到 Buefy 图像答案

【问题标题】：How to add @click event to the Buefy image如何将@click 事件添加到 Buefy 图像
【发布时间】：2021-10-05 09:58:56
【问题描述】：

如何将@click 事件添加到Buefy image 组件？

这是我的代码不起作用（事件未触发）：

<div class="is-flex is-align-items-center">
  <b-image class="filelist-item-image" :src="file.thumb" @click.prevent="showPlayer(file)" />
  <div class="ml-4">
    <h2>{{ file.name }}</h2>
    <b-tag>{{ file.width }}x{{ file.height }}</b-tag>
  </div>
</div>

【问题讨论】：

究竟是什么不起作用？
它根本不会触发事件处理程序。
好的，但这是什么意思？有错误吗？是否触发了事件但功能不起作用？您需要提供更多信息。
它什么都不做。没有错误没有控制台日志什么都没有。
好的答案是@click.nativ 所以我把它留在父元素上。

标签： vue.js events vuejs2 buefy

【解决方案1】：

如果您查看docs b-image 组件没有声明click 事件（这意味着组件本身不会触发任何click 事件）。

您正在尝试侦听native click event on the component，因此您需要像这样绑定它：@click.native="..."

注意

仅在使用 Vue 2 和 native 修饰符 must be removed 时才需要，如果您曾经升级到 Vue 3

【讨论】：

谢谢.......