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.