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>

Would you please elaborate more on what exactly you're doing! the use case is not clear to be able to give you the right answer. — MAW, Dec 20 '20 at 21:37

score 0 · Answer 1 · edited Jul 16 '22 at 03:58

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

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

1 Answers1