javascript - Vuetify 点击图片槽

Question

我试图能够在v-img不触发附加到v-img自身的事件处理程序的情况下单击组件内的某个按钮。到目前为止，我有以下代码

<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')
    },
    
  }
})

当我单击open按钮时，它会同时触发onClickImage和onClickButton方法。我只想触发onClickButton方法。如果这将是一个本机组件，我可以做一个简单的@click.self="onClickImage"，但由于这是一个 Vuetify 组件，我不确定如何处理这种情况。这是一个带有代码的游乐场：

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

标签： javascriptvue.jsvuetify.js

Answer 1

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

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