vue 2 [GSI_LOGGER]: 'callback' 的值不是一个函数。配置被忽略

Question

我试图在我的 Vue2 项目中放置一个 google 登录按钮，所以我尝试按照此处的说明进行操作 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>

当我重新加载 page/component 时，它会显示错误 [GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.

我认为问题是 data-callback 无法找到或识别我已经在 methods 下声明的 myCallbackFunction。我也尝试将 myCallbackFunction 放在 computed 下，但它仍然 return 同样的错误。那么，有什么方法可以让这项工作成功吗？

Answer 1

好的，我想我明白了——但是我从使用 HTML 文档切换到 JavaScript 文档，因为 VueJS 更适合这个。

不过，我不知道安装是否是最佳选项，但它至少按预期工作。

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

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

Answer 2

使用globalThis.yourcallbackfunction

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

vue 2 [GSI_LOGGER]: 'callback' 的值不是一个函数。配置被忽略

vue 2 [GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored

vue.js

google-identity