组件上的其他@click事件-VueJS

Question

我的项目从VueJS和Buefy开始。

该组件具有两种不同的操作，请单击：

• 点击青色区域->重定向到其他页面（操作1）
• 单击洋红色区域->显示下拉菜单（操作2）

但是当我单击动作2 时，动作1 总是有效。

这是我的组件：

<MyComponent
  :projects="data"
  @click.native="actionOne()"
/>

在我的组件内部，有一个下拉列表（使用Buefy组件）：

<p>{{ data.projects }}</p>
<BDropdown aria-role="list">
  <BButton
    slot="trigger"
    class="button"
    type="is-text"
    @click.prevent="actionTwo()"
  >
    <BIcon icon="dots-horizontal" />
  </BButton>
  <BDropdownItem aria-role="listitem">Update</BDropdownItem>
  <BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>

我尝试使用其他事件修饰符，但是我无法达到预期的行为：

• stop
• prevent

Answer 1

这可能是由于事件冒泡而发生的。当您单击下拉列表元素时，单击事件会冒泡直至青色区域。您需要做的是取消下拉菜单中的事件冒泡。

<BDropdown aria-role="list">
  <BButton
    slot="trigger"
    class="button"
    type="is-text"
    @click="actionTwo($event)"
  >
    <BIcon icon="dots-horizontal" />
  </BButton>
  <BDropdownItem aria-role="listitem">Update</BDropdownItem>
  <BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>

<script>
export default {
    methods: {
        actionTwo(e) {
            e.cancelBubble = true
        }
    }
}
</script>

Answer 2

您可以使用self修饰符。

<MyComponent
  :projects="data"
  @click.native.self="actionOne()"
/>

如文档所述：

  

仅当event.target是元素本身时才触发处理程序
  即不是来自子元素
  （source）

Answer 3

我找到了解决方案。问题来自下拉菜单组件（Buefy）中的特定事件。因此，我在下拉菜单触发点击事件中添加了stop修饰符，并在组件中添加了prevent。

解决方法：

<MyComponent
  :projects="data"
  @click.native.prevent="actionOne()"
/>

<BDropdown aria-role="list" @click.native.stop>
  <BButton
    slot="trigger"
    class="button"
    type="is-text"
  >
    <BIcon icon="dots-horizontal" />
  </BButton>
  <BDropdownItem aria-role="listitem">Update</BDropdownItem>
  <BDropdownItem aria-role="listitem">Archive</BDropdownItem>
</BDropdown>