vue.jseventsvuejs2buefy

How to add @click event to the Buefy image

How can I add @click event to the Buefy image component?

This is my code which does not work (event is not fired):

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

  • If you take a look at the docs b-image component has no click event declared (which means the component itself does not fire any click event).

    You are trying to listen for a native click event on the component so you need to bind it like this: @click.native="..."

    Note

    This is needed only when using Vue 2 and the native modifier must be removed if you ever upgrade to Vue 3