Question

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

首先是@click.native.stop。在这里，我成功处理了传播，但是click事件不仅在v-switch中，而且涵盖了整个容器（示例中以红色显示）
第二次尝试使用@change。这里，仅在v-switch切换上激活了切换事件，但是当我单击v-switch时，v-对话框也会打开。因此，对于@change，它也无法正常工作。
第三次尝试使用@change.stop，但是没有理想的结果，与第二次尝试相同。

我的问题是-有没有办法阻止传播（没有我的第一个示例那样的副作用），当我单击v-switch仅切换switch时，没有，后面的v对话？

Answer 1

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

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

注意：要限制捕获点击的区域，您必须将.v-input--switch的{{1}}值更改为display：

inline-block

您实际上不需要停止多于.v-input--switch { display: inline-block; }，因为对话框仅在单击时打开。如您所见，您可以使用 Tab + Space 切换开关，并且模式不会打开。

Answer 2

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

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

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

2 个答案: