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

Answer 1

1. Register your component, and declare the handler method inside:

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

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