CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Bruno Francisco
Bruno Francisco

Reputation: 4240

Vuetify click on image slot

I'm trying to be able to click on a certain button inside a v-img component without triggering the event handler attached to the v-img itself. So far I have the following code

<div id="app">
  <v-container class="modal-container">
    <v-img
        lazy-src="https://picsum.photos/id/11/10/6"
        max-height="150"
        max-width="250"
        src="https://picsum.photos/id/11/500/300"
        @click="onClickImage"
    >
      <v-btn primary @click="onClickButton">open</v-btn>
    </v-img>
  </v-container>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      
    }
  },
  methods: {
    onClickImage() {
      alert('Clicked image')
    },
    onClickButton() {
      alert('Clicked button')
    },
    
  }
})

when I click on the open button it triggers both onClickImage and onClickButton methods. I would like to trigger only onClickButton method. If this would be a native component I could do a simple @click.self="onClickImage" but since this is a Vuetify component I'm not sure how to handle the situation. Here is a playground with the code:

https://codepen.io/okokook/pen/GRZagxQ?editors=1010

Upvotes: 1

Views: 2939

Answers (1)

Cosimo Chellini
Cosimo Chellini

Reputation: 1730

 <v-btn primary @click.stop="onClickButton">open</v-btn>

https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

Upvotes: 2

Related Questions