Is it possible to prevent the function on the <div>
element from running when clicking the button inside the div?
When clicking the button element, the function: toggleSystemDetails
should not be triggered? Is this possible in Vue?
<div v-on:click="toggleSystemDetails($event, system.id)" v-for="(system, index) in organization.systems" :key="system.id">
Outer Div
<button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
Inner Button
</button>
</div>
Have a look at Event Modifiers in the Vue.js v3 docs (v2 docs here), v-on:click.stop
will stop that click from propagating or "bubbling" up to the parent element.