clickable button over clickable image

user_6250501 0
Viewed 2435

I would like to have a card with clickable main image content and clickable button over it. See the image

image.

The image has one onclick action, button second one. But I am unable to fire action from the button, it always does an action associated with the image click.

My code is:

<v-card flat class="rounded-0">
    <v-img style="z-index: 0" :src="product.images" 
        v-on:click="action1">
        <v-card-title class="align-end fill-height" primary-title>

            <v-btn class="blue" style="z-index: 9999" v-on:click="action2">clickable</v-btn>
           </v-card-title>

          </v-img>                       
 </v-card>

Is there something I am missing out?

vuetify.js vue.js javascript
2 Answers

Here in above code, you have two events one is parent and another one is child

Once the parent is clicked only parent function is invoked. If you click on child, it fires child first then parent function

To stop the parent trigger when child is clicked use stop modifier

The below code will work as expected

<v-card flat class="rounded-0">
    <v-img style="z-index: 0" :src="product.images" v-on:click="action1">
        <v-card-title class="align-end fill-height" primary-title>
            <v-btn class="blue" style="z-index: 9999" v-on:click.stop="action2">clickable</v-btn>
        </v-card-title>
    </v-img>                       
</v-card>
user_105557850

To prevent bubbling you need a modifier on your click event called self:

v-on:click.self="action1"
v-on:click.self.stop="action2"
user_109907370
Related