Vue.js: Simple click function not firing

Question

I have a very simple app:

Answer 1

When you do :

That means that your are waiting page-change component emit the click event.

Best solution (thanks to @aeharding) : Use .native event modifier

Solution 1 : emit click event from child component :

Vue.component("page-change", {
    template: "Button",
    props: ["page"],
    methods: {
       clicked: function(event) {
         this.$emit('click', this.page, event); 
       }
    }
})

For information event is the default value passed by Vue for native event like click : DOM event

Solution 2 : emit directly from parent component :

Vue.component("page-change", {
    template: "Button {{ page }}",
    props: ["page"]
})

var clients = new Vue({
    el: '#show_vue',
    data: {
        currentRoute: window.location.href,
        pages: [
          'bio', 'health',
          'finance', 'images'
        ]
    },
    methods: {
        changeThePage: function(page, index) {
            console.log("this is working. Page:", page, '. Index:', index)
        }
    }
});