javascript - Vue.js: Simple click function not firing -

i have simple app:

<div id="show_vue">     <page-change page="bio" @click="changethepage"></page-change>     <page-change page="health" @click="changethepage"></page-change>     <page-change page="finance" @click="changethepage"></page-change>     <page-change page="images" @click="changethepage"></page-change> </div>  vue.component("page-change", {     template: "<button class='btn btn-success'>button</button>",     props: ["page"] })  var clients = new vue({     el: '#show_vue',     data: {         currentroute: window.location.href     },     methods: {         changethepage: function() {             console.log("this working")         }     } }) 

...but when click <page-change></page-change> button, nothing logged console. know i'm missing simple i'm not getting errors.

how make click fire changethepage

when :

<page-change page="bio" @click="changethepage"></page-change> 

that means waiting page-change component emit click event.

best solution (thanks @aeharding) : use .native event modifier

<page-change page="bio" @click.native="changethepage"></page-change> 

solution 1 : emit click event child component :

vue.component("page-change", {     template: "<button @click='clicked' class='btn btn-success'>button</button>",     props: ["page"],     methods: {        clicked: function(event) {          this.$emit('click', this.page, event);         }     } }) 

for information event default value passed vue native event click : dom event

solution 2 : emit directly parent component :

vue.component("page-change", {      template: "<button class='btn btn-success'>button {{ page }}</button>",      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 working. page:", page, '. index:', index)          }      }  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script>  <div id="show_vue">      <span v-for="(page, index) in pages" :key="index+page"          @click="changethepage(page, index)">          <page-change :page="page"></page-change>          </span>    </div>