How do I make sure the child element doesn't react to the parent element's event with v-btn in vuetify?

Question

I created 4 buttons dynamically and added custom properties to the buttons. Whenever I press the button, I check the event and try to use the added attribute value. If I check the browser developer tool, there is a SPAN tag under the button tag, so when I click the SPAN tag part, the properties of the SPAN tag are read. Clicking outside of SPAN tag is OK. How can I get only btn click event?

<v-row>
    <v-col v-for="(num, index) in getButtonCount" :key="index">
        <v-badge bordered color="error" :content="num" overlap left>
        <v-btn
            color="warning"
            width="130px"
            height="40px"
            dark
            @click="solveQuestion"
            :answer="answer[index].isTrue"
        >
            {{ answer[index].desc }}
        </v-btn>
        </v-badge>
    </v-col>
    </v-row>

Below is the converted html tag in developer tools.

<button type="button" class="v-btn v-btn--contained theme--dark v-size--default warning" answer="true" style="height: 40px; width: 130px;">
    <span class="v-btn__content"> Testing
    </span>
</button>

Answer 1

If you want only the button even to fire but not it's parent use the stop event handler

This section of the Vue docs is what you require

So, assuming that button is nested inside another click event you can do this:

<v-row>
    <v-col v-for="(num, index) in getButtonCount" :key="index">
        <v-badge bordered color="error" :content="num" overlap left>
        <v-btn
            color="warning"
            width="130px"
            height="40px"
            dark
            @click.stop="solveQuestion"
            :answer="answer[index].isTrue"
        >
            {{ answer[index].desc }}
        </v-btn>
        </v-badge>
    </v-col>
    </v-row>

Happy Coding