代码之家 › 专栏 › 技术社区 › imin

vue 2[GSI_LOGGER]:“callback”的值不是函数。已忽略配置

google-identity vue.js

0

imin · 技术社区 · 4 年前

我正试图在我的Vue2项目中放置一个谷歌登录按钮,所以我试着按照这里的说明操作 https://developers.google.com/identity/gsi/web/guides/display-button#html

所以我把下面的代码放进我的 Hello.vue 组成部分

<template>
  <section>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-callback=myCallbackFunction
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </section>
</template>
<script>
  export default {      
    methods: {
      myCallbackFunction(){
      }
    }
  }
</script>

当我重新加载页面/组件时,它将显示错误 [GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.

我认为问题在于 data-callback 找不到或无法识别 myCallbackFunction 我已经声明了 methods 。我也试着把 myCallback函数 在下面 computed 相反,但它仍然返回相同的错误。那么,我有什么办法让它发挥作用吗?

0 回复 | 直到 4 年前

1

Jeremy Caney Abloin 4 年前

好吧,我想我明白了,但我从使用HTML文档改为使用JavaScript文档,因为VueJS在这方面工作得更好。

不过,我不知道mounted是否是 最好的 选项,但它至少按预期工作。

只需使用在方法中创建的回调函数即可。

  mounted: function () {
   google.accounts.id.initialize({
   client_id:
    'xxxxxxx.apps.googleusercontent.com',
     callback: this.handleCredentialResponse,
  })
  google.accounts.id.prompt()}

2

1

ImaDoofus 3 年前

在Vue 2中为我工作

<template>
    <div>
        <div id="signin_button"></div>
    </div>
</template>

<script>

    export default {
        components: {

        },
        methods: {
            handleCredentialResponse(response) {
                console.log(response);
            }
        },
        mounted: function () {
            let googleScript = document.createElement('script');
            googleScript.src = 'https://accounts.google.com/gsi/client';
            document.head.appendChild(googleScript);
            
            window.addEventListener('load', () => {
                console.log(window.google);
                window.google.accounts.id.initialize({
                    client_id: "xxxxxxx.apps.googleusercontent.com",
                    callback: this.handleCredentialResponse
                });
                window.google.accounts.id.renderButton(
                    document.getElementById("signin_button"),
                    { theme: "outline", size: "large" }  // customization attributes
                );
            })
        }
    }
</script>

3

0

minor 4 年前

使用globalThis.yourcallback函数