How to click on whole vuejs component

Question

I have component

and i want run method after click

<my-component @click="showOtherDiv"></my-component>

i have this method on main app methods

var app = new Vue({
    el: '#app',

    data: {},

    methods: {
        showOtherDiv : function(){
            alert('Some message');
        }
    }
});

but seems like "click" not works on full component

It should work. Can you provide a codepen or jsfiddle

CodinCat
– CodinCat

2017-04-20 08:51:58 +00:00
Commented Apr 20, 2017 at 8:51 — CodinCat
– CodinCat, Commented Apr 20, 2017 at 8:51

tony19 · Accepted Answer · 2022-07-15 20:41:15Z

7

Register your component, and declare the handler method inside:

 Vue.component('my-component', {
     // ...
     methods: {
         showOtherDiv : function(){
             alert('Some message');
         }
     }
 });

Add the .native modifier to the event name:
```
 <my-component @click.native="showOtherDiv"></my-component>
```
From the docs:

Binding Native Events to Components

[…] when you want to listen for a native event on the root element of a component […] you can use the .native modifier for v-on.

edited Jul 15, 2022 at 20:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 20, 2017 at 8:54

Eliran Malka

16.4k7 gold badges80 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to click on whole vuejs component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related