VueJS: v-on:click not working on clicking the <button>

Question

I have a Vue app configured by NuxtJS. I have the following template and worker methods that should be called upon clicking the button. But they are not being called.

<template>
    <button class="btn google-login" id="google-login" @click.native="googleLogin">
      <img src="~assets/google-icon.svg" alt />
      Login with Google
    </button>
</template>

<script>
import firebase from "firebase";
export default {
  data() {
    return {
      showPassword: false,
      checkbox1: false
    };
  },
  mounted: function() {
    console.log(firebase.SDK_VERSION);
  },
  methods: {
    googleLogin: function(event) {
      console.log('Reached inside the function');


      let googleProvider = new firebase.auth.GoogleAuthProvider();
      googleProvider.addScope(
        "https://www.googleapis.com/auth/contacts.readonly"
      );
      firebase.auth().useDeviceLanguage();
      console.log(googleProvider);
    }
  }
};
</script>

I have the method inside the methods object. I have tried multiple solutions v-on:click, @click, @click.prevent but none seem to be working

Answer 1

.native event modifier is used with elements when you are trying listen any event happening in the child Component from the root Component.

For example you have a component button-counter, and your parent component need to listen to the click event happening in the button-counter component.

In your case you just neeed to trigger click event using @click="googleLogin"

Official Documentation

Read More

Sample implementation

new Vue({
  el: "#app",
  name: "MyApp",
  components: {
    'button-counter': {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    },
  },
  methods: {
    googleLogin: function (event) {
      console.log('Reached inside the function');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
  <button class="btn google-login" id="google-login" @click="googleLogin">
    Login with Google
  </button>
  <button-counter @click.native="googleLogin" />
</div>