如何在 Vuetify v-switch 中停止传播？

Question

我正在使用 Vuetify，我有 v-data-table。当我点击行v-dialog 时必须打开。我的v-data-table 的行内还有v-switch。 我的问题来了，当我点击v-switch 时，它会切换，但也会传播并打开我的v-dialog。 在我的codepen 我有三个 v-switch 点击事件的例子。

• 首先是@click.native.stop。这里我成功处理了传播，但是点击事件不仅在v-switch中，而且覆盖了整个容器（示例中为红色）
• 我的第二次尝试是使用@change。这里的 switch 事件仅在 v-switch 切换时被激活，但是当我单击 v-switch 时，v-dialog 也会打开。所以@change 也不能正常工作。
• 第三次尝试使用@change.stop，但没有想要的结果，与我第二次尝试相同。

我的问题是 - 有没有办法停止传播 （没有像我的第一个示例那样的副作用） 当我点击 v-switch 来仅切换 switch 时，而不是和后面的v-dialog？

Answer 1

只需将@click.native.stop 添加到您的<v-switch>。

看看它是否正常工作：https://codepen.io/andrei-gheorghiu/pen/RwWPONL

注意：要限制捕获点击的区域，您必须将.v-input--switchs display 值更改为inline-block：

.v-input--switch {
  display: inline-block;
}

您实际上不需要停止超过click，因为对话框仅在单击时打开。如您所见，您可以使用 Tab + Space 切换开关并且模态不打开。

Answer 2

我的解决方法是使用@click.native.stop 停止传播并使用@change 进行事件

<v-switch
    v-model="item.isActive"
    @click.native.stop
    @change="toggleActive(item)">
</v-switch>