Vue.js: Simple click function not firing

Question

I have a very 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 is working")
        }
    }
})

...but when I click the <page-change></page-change> button, nothing is logged to the console. I know I'm missing something simple but I'm not getting any errors.

How do I make my click fire changeThePage

tony19 · Accepted Answer · 2022-07-15 19:53:38Z

When you do :

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

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

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

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

Solution 1 : emit click event from 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 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 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 is 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>

Is that th only way to fire the parent's changeThePage method? I thought there was a more direct route
@JeremyThomas I updated my answer : now you have a solution without emit in the child component.
@SLYcee another alternative would be to pass the changeThePage method to the page-change component. But your first method is the typical approach.

tony19 · Accepted Answer · 2022-07-15 01:00:44Z

7

The best way to do this is to use the .native event modifier.

For example:

<my-custom-component @click.native="login()">
  Login
</my-custom-component>

Source: https://v2.vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components

edited Jul 15, 2022 at 1:00

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 21, 2017 at 20:23

aeharding

6181 gold badge5 silver badges18 bronze badges

1 Comment

Nikhil Nanjappa Over a year ago

Unfortunately, this does not work for me. It used to work with @click on Chrome but not on Safari. Adding @click.native doesn't work on both. Any idea why ?

Kenneth Mwangi · Accepted Answer · 2020-05-02 12:30:49Z

0

apparently v-on:click seems to work better with the .native event modifier.

try page="bio" v-on:click.native="changeThePage()"></page-change>. It worked for me.

answered May 2, 2020 at 12:30

Kenneth Mwangi

11 bronze badge

Collectives™ on Stack Overflow

Vue.js: Simple click function not firing

3 Answers 3

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

Solution 1 : emit click event from child component :

Solution 2 : emit directly from parent component :

3 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

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

Solution 1 : emit click event from child component :

Solution 2 : emit directly from parent component :

3 Comments

1 Comment

Comments

Linked

Related