如何在 vuejs 中隔离父元素和子元素之间的单击事件处理程序

Question

我正在尝试将语义 UI 组件转换为依赖 vuejs 而不是 jQuery，但我不知道如何隔离 v-on:click 在子元素和它的父元素之间。

在下面的示例中，我使用 v-on:click 按钮，该按钮将使用切换功能显示下拉菜单，还有另一个 v-on:click 分配给删除图标，这将触发另一个功能。

问题是，当我点击删除图标时，下拉菜单会出现。

如何防止这种情况发生？

`https://jsbin.com/minezij`

Answer 1

您可以使用stop Event Modifiers 停止将事件传播到父元素。

<!-- the click event's propagation will be stopped -->
<a v-on:click.stop="doThis"></a>