Click event listener not working on a component in VueJS

Question

HTML:

<ul>
    <item
      v-on:click="boom"
      v-bind:product="item"
      v-bind:key="item.id"
      v-for="item in items"
     ></item>
</ul>

Javascript:

Vue.component('item', {
    props: ['product'],
    template: '<li><a href="#">{{ product.name }}</a></li>',
});

let app = new Vue({
    el: 'ul',
    data: {
        items: [
            { id: 0, name: 'penda' },
            { id: 1, name: 'harla' },
            { id: 2, name: 'calar' },
        ],
    },
    methods: {
        boom: function (e) {
            alert('Aha!');
        }
    }
});

Everything is rendered fine, but the boom event listener is never fired. Do you know the reason why?

dagalti · Accepted Answer · 2019-03-27 22:15:46Z

Use @click.native="boom" as @Pvl answered. OR bind the custom from parent component and emit from child. please run & check the below code.

Vue.component('item', {
    props: ['product'],
    template: '<li @click="clickevent($event)"><a href="#">{{ product.name }}</a></li>',
    methods:{
clickevent(e){
this.$emit('componentclick', e)
}
}
});

let app = new Vue({
    el: 'ul',
    data: {
        items: [
            { id: 0, name: 'penda' },
            { id: 1, name: 'harla' },
            { id: 2, name: 'calar' },
        ],
    },
    methods: {
        boom: function (e) {
            alert('Aha!');
            console.log(e)
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul>
    <item
      @componentclick="boom"
      v-bind:product="item"
      v-bind:key="item.id"
      v-for="item in items"
     ></item>
</ul>

tony19 · Accepted Answer · 2022-07-15 22:21:53Z

3

Try to add .native to get v-on:click.native="boom"

More details can be found here

edited Jul 15, 2022 at 22:21

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 27, 2019 at 22:11

NaN

1,98515 silver badges16 bronze badges

4 Comments

Matt Over a year ago

My understanding is this: the root instance was trying to listen to an event from the child component. But, if the child component doesn't tell the root instance about it (via emit), the event listener will never be triggered. Does this mean that native events don't follow this pattern?

NaN Over a year ago

As I understand you can create custom click like $emit('click', e) and in this case, you will have the conflict between native and custom click events. To prevent situations like that '.native' modifier was introduced.

NaN Over a year ago

.native tells vue to add the listener for the child root node (li in your example). If you try to combine my code with the code from @dagalti's answer you can find two listeners for the click event on the same element. jsfiddle.net/fc0p9jq2

Matt Over a year ago

Thank you. I'm still confused as to why it's possible to access the parent's boom when using the native modifier. I guess this is to ensure nothing gets passed from child components without explicitly saying so.

Collectives™ on Stack Overflow

Click event listener not working on a component in VueJS

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related