[Vuejs]-Different @click event on component – VueJS

by

0👍

This probably happens because of event bubbling. When you click on the dropdown element, the click event bubbles up to the cyan area. What you need to do is cancel the event bubbling for the dropdown element.

<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>

0👍

You can use the self modifier.

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

As the documentation says:

only trigger handler if event.target is the element itself
i.e. not from a child element
(source)

0👍

I found the solution. The problem came to specific event from Dropdown component (Buefy). So I added stop modifier to Dropdown trigger click event and I added prevent in my component.

Here the solution :

<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>

Leave a comment