时间戳

首页 > 解决方案 > 如何将@click 事件添加到 Buefy 图像

vue.js - 如何将@click 事件添加到 Buefy 图像

问题描述

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

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

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

标签： vue.jseventsvuejs2buefy

解决方案

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

您正在尝试侦听组件上的本机 click事件，因此您需要像这样绑定它：@click.native="..."

笔记

仅在使用 Vue 2 时才需要，并且如果您升级到 Vue 3 ，则必须删除native修饰符

推荐阅读