VueJS: v- on :单击“不工作”单击<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，您的父组件需要侦听button-counter组件中发生的click事件。

在您的示例中，您需要使用@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>

​

Answer 2

您需要以这种方式触发单击事件。

​

@click="googleLogin"

​