Currently, I am working with Vuetify and have incorporated the use of v-data-table. Whenever I click on a row within this data table, a corresponding dialog box represented by v-dialog should open. Additionally, each row contains a v-switch element. However, I am experiencing an issue where clicking on the v-switch not only toggles its state but also triggers the opening of the v-dialog.
Within my codepen example, you will find three instances showcasing different approaches to handling the v-switch click events.
- The first attempt involves using
@click.native.stop. While this successfully prevents event propagation, it results in the click event extending beyond the v-switch element to cover the entire container (highlighted in red in the example). - In my second try utilizing
@change, the switch event only activates upon toggling the v-switch. Nevertheless, this approach still leads to the unwanted behavior of opening the v-dialog when clicking on the v-switch. - For the third attempt, I experimented with
@change.stop, yet unfortunately, it yielded the same unintended outcome as my second attempt.
My inquiry revolves around finding a solution to halt event propagation without any side effects akin to those in my initial example. Is there a way to ensure that clicking on the v-switch solely toggles its state, without triggering the underlying v-dialog?