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

Answer 1

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

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

Vuetify单击图像插槽

1 个答案: