如何给Buefy图片添加@click事件

Question

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

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

<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>

Answer 1

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

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

备注

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

如何给Buefy图片添加@click事件

How to add @click event to the Buefy image

vue.js

events

vuejs2

buefy