Vue v-on:click does not work on component

javascript

event-handling

vue-components

javascript-best-practices

byAlex Kataev·Jan 19, 2025

If your v-on:click is acting shy and refusing to trigger within a Vue component, toss in an $emit('click') within the click handler of your component. Here's a quick set up to illustrate the point:

<!-- Child Component -->
<template>
  <button @click="handleClick">Click</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // Here, have a click event, you naughty parent!
      this.$emit('click'); 
    }
  }
}
</script>

In your parent component, just @click your way to victory:

<ChildComponent @click="parentHandler"></ChildComponent>

Now, the stubborn child component will emit the click event which the parent adroitly handles. Voila!

Binding events and methods in components

Wondering why your v-on:click isn't throwing a party in your Vue component? Here are some points to turn that party pooper around:

Verify testFunction method is chilling within the methods object and waiting for an invite (@click), so to speak.
The .native modifier is the life of the party in Vue 2. But don't bring it to Vue 3, it will kill the buzz. Here, just directly tie your wishes (click events) to a <div> for a more hassle-free event.
Custom event names like to keep it chill. So ensure that you use kebab-case and not CamelCase.
In Vue 2, RSVP the child events utilizing $listeners from parent's side.
By tacking @event-name to the child components, you ensure the parent does a quick tango whenever a child steps on the dance floor, meaning listens to custom events.
Is your component acting like a wallflower? Check out for wallflower syntax, pesky typos and ensure the event binding is applied to the correct guest element.

Common gotchas in component event handling

Binding events to component root in Vue 2

In Vue 2, if you're tieing the knot with click events and component root element try to use .native modifier. Otherwise, your event listener may stand at the altar alone, as it's trying to marry the wrong bride (root element's native click event).

Emitting custom events

In Vue 3, the trend is going solo. A child component doesn't need a ring, but a simple $emit to flex its independence up to its parent. Ah, the joy of single responsibility!

Syntax got you confused?

Remember, "@" is the cool guy's way of saying "v-on:". They mean the same, but "@" is less nerdy and keeps your world (template) clean. So let loose and mix it up!

Mix and match responsibilites

It's a good practice to maintain separation between the component and vue instance to keep the comet of reusable code in orbit. Functionality encapsulated within components is the law of the Vue Universe.

Vue 3 modifier updates

In Vue 3, keep your code clean and avoid saying ".native". Vue 3's got your back and handles native events on component root elements without you needing to utter a word.

Visualization

When your v-on:click event in Vue refuses to do its job in a component, it's like trying to fill up a flat tire with an empty air pump. When events are set up correctly:

Flat tire: your Vue component
Filling: Correct v-on:click binding
Empty Air pump: a faulty v-on:click binding

Filling up the tire (Triggering the event)

Empty air pump: ❌ (Tire stays flat)
Filling with air: ✅ (Tire is ready to go!)
# Bind events correctly or your tire (component) will stay flat.

Checklist for correct event setup:

Root element: Do you need .native in Vue 2? Vue 3 doesn't need it.
Event handler: Ensure testFunction or your custom method is defined.
Event emission: Does $emit work in child and parent components?
Templates: Are event listeners and bindings correctly applied?
Debugging: Use console logs to ensure events are triggered. It's like the ultraviolet light for your code.