Unique title: "Implementing Unique Event Handlers with VueJS Components"

Question

Unique title: "Implementing Unique Event Handlers with VueJS Components"

My VueJS and Buefy project begins with two distinct click actions:

Click on the Cyan area -> redirects to another page (Action 1)
Click on the Magenta area -> shows a dropdown menu (Action 2)

https://i.stack.imgur.com/AVLOS.png

However, when clicking on Action 2, it always triggers Action 1.

Below is my component code:

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

Within my component, there is a dropdown (utilizing Buefy component) :

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

I have attempted using different event modifiers like stop and prevent, but the desired behavior is not achieved.

stop
prevent

javascript vue.js dom-events bulma buefy

Answer 1

Answer №1

This issue may arise due to event bubbling. When the dropdown element is clicked, the click event travels up to the cyan area. To resolve this, you should prevent the event from 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
        }
    }
}

Answer 2

This issue may arise due to event bubbling. When the dropdown element is clicked, the click event travels up to the cyan area. To resolve this, you should prevent the event from 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
        }
    }
}

Answer 3

Answer №2

After some investigation, I discovered the solution to my problem. It turns out that the issue was related to a specific event from the Dropdown component (Buefy). To resolve it, I added the stop modifier to the Dropdown trigger click event and included prevent in my component.

Here is the updated 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>

Answer 4

After some investigation, I discovered the solution to my problem. It turns out that the issue was related to a specific event from the Dropdown component (Buefy). To resolve it, I added the stop modifier to the Dropdown trigger click event and included prevent in my component.

Here is the updated 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>

Answer 5

Answer №3

Utilize the self modifier for optimal functionality.

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

According to the documentation:

only activate handler if event.target matches the element itself
as opposed to originating from a child element
(source)

Answer 6

Utilize the self modifier for optimal functionality.

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

According to the documentation:

only activate handler if event.target matches the element itself
as opposed to originating from a child element
(source)

Unique title: "Implementing Unique Event Handlers with VueJS Components"

Answer №1

Answer №2

Answer №3

Similar questions

How to Incorporate an Anchor Link into a Div as well as its Pseudo Element using CSS, Javascript, or jQuery

Utilizing the asyncData hook while performing a hard refresh in NuxtJS

trigger a p:ajax event by employing a right-click action

Using AngularJS to iterate through JSON data

Angular Alert: [$injector:modulerr] Unable to create the angularCharts module because: Error: [$injector:nomod]

Guidelines for incorporating Angular variables into jQuery scripts

Changing the value of a form input name after a $scope.$watch event is activated

My Node.js code has encountered an unexpected end of input error

Generatively generating a new element for the react application to be mounted on

Error: The variable "deleted1" is not declared and cannot be used on the HTML button element's onclick

Having trouble accessing news feed with jQuery due to an unexpected token error when attempting to cross domains

The functionality of Vue.js Stylus and scoped CSS appears to be malfunctioning

A function containing a JavaScript Event Listener for better encapsulation

Looking for assistance with my MEAN stack To Do App project development

Having difficulty in choosing and displaying the dropdown values

How can I search across different fields within a single collection using meteor-autocomplete?

Trouble with Fetch in JS and PHP not sending parameters

What is causing the color to be replaced by the latest selection?

While trying to set up a development server in Firebase, I mistakenly deleted my build folder

Elements listed are often ignored by HTML