如何为Buefy image组件添加@click事件并解决触发失效问题

原因 #

Buefy的b-image是封装后的自定义组件，默认不会透传原生click事件到组件根元素，所以直接写@click不会触发。

解决方法 #

方法1：使用.native修饰符（适用于Vue2项目）

直接修改点击事件的修饰符即可：

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

方法2：外层包裹原生元素绑定事件（Vue2/Vue3全版本兼容）

给b-image外层套一个普通div，把点击事件绑定到这个原生元素上：

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

方法3：使用.root修饰符（适用于Vue3项目）

Vue3已废弃.native修饰符，新版本Buefy支持直接用@click.root绑定根元素事件：

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

内容的提问来源于stack exchange，提问作者Čamo