clickable button over clickable image

Question

I would like to have a card with clickable main image content and clickable button over it. See the 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?

Answer 1

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>