In my Vue application, there is a situation where I have a button called "detach button" with a @click function inside an element that is clickable. When clicking on this parent element, it triggers another @click function and toggles a Bootstrap modal event.
The issue arises when I click on the child button, as it ends up triggering both events (the @click and the Modal toggle) of the parent element.
I have attempted to use @click.stop and @click.prevent on the child button to prevent this behavior, but it still triggers the events of the parent. Is there a way to avoid triggering the parent logic in this scenario?
Any help or suggestions would be greatly appreciated!
<tbody>
<tr
v-for="project in $store.state.projectlist"
:key="project.id"
class="custompointer"
@click.stop="storeCurrentProfileProjectBinding(project)"
data-bs-toggle="modal"
data-bs-target="#editProjectModal"
>
<td>
<div class="symbol symbol-40px">
<img
:src="project.clientlogo"
class="h-50 align-self-center"
alt=""
/>
</div>
</td>
<td>
<div class="d-flex flex-row">
<a
href="#"
class="text-dark fw-bold text-hover-primary fs-6"
>{{ project.clientname }}</a>
<div class="ms-1">
<!--begin:detach button-->
<a
href="javascript:void(0)"
class="text-hover-danger"
@click.stop="detachFromThisProject(project)"
>
</a>
<!--end:detach button-->
</div>
</div>
</td>
</tr>
</tbody>