How can I prevent the click event of the parent card element from being triggered when clicking on the child dropMenu? Vue 3

There is a certain case card, when clicked on, the transition inside takes place

        v-for="caseInfo in casesInfo"
        :key="caseInfo.id"
        :caseInfo="caseInfo"
        @click.self="$router.push(`/my-cases/${caseInfo.id}`)"
        class="main-container"
      />````
There is a dropMenu inside this card, when I click on it, I also go to, how do I stop the event?

stop and prevent don't work, self stops all clicks

You need @click.stop on the dropdown button or check if the target is the dropdown in the card's click:

@click="e => e.target.closest('.dropdown-button') ?? $router.push(`/my-cases/${caseInfo.id}`)"