VueJS：v-on:click 在单击 <button> 时不起作用

Question

我有一个由 NuxtJS 配置的 Vue 应用程序。我有以下模板和工作方法，应在单击按钮时调用。但他们没有被召唤。

<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>

我有methods对象内部的方法。我曾尝试多种解决方案v-on:click，@click，@click.prevent但没有似乎工作

Answer 1

.native当您尝试侦听根组件中子组件中发生的任何事件时，事件修饰符与元素一起使用。

例如，您有一个组件button-counter，您的父组件需要监听click该组件中发生的事件button-counter。

在你的情况下，你只需要使用触发点击事件@click="googleLogin"

官方文档

阅读更多

示例实现

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>