解决在Vue中使用谷歌快捷登录时data-callback属性不生效的问题

谷歌的 data-callback 属性需要一个全局函数作为回调函数，而不能直接绑定到 Vue 组件的方法上。

原因是，当谷歌客户端库加载完成并准备好调用回调函数时，它会在全局范围内查找该函数，而Vue 组件中的方法只能在组件实例的上下文中访问，无法直接暴露给全局作用域。因此，如果你直接将 Vue 组件的方法绑定到 data-callback 属性上，谷歌客户端库将无法找到该方法并执行。

所以你需要在 mounted 钩子函数中，将 Vue 组件的方法 getGoogleInfo 赋值给一个全局变量或全局对象的属性，使它在全局范围内可访问

<template>
  <div>
    <div id="g_id_onload"
         data-client_id="YOUR_CLIENT_ID"
         data-context="signin"
         data-ux_mode="popup"
         data-callback="getGoogleInfo"
         data-nonce=""
         data-auto_prompt="false">
    </div>

    <div class="g_id_signin"
         data-type="standard"
         data-shape="rectangular"
         data-theme="outline"
         data-text="signin_with"
         data-size="large"
         data-logo_alignment="right">
    </div>
  </div>
</template>

<script>
export default {
  // 其他代码...
  
  mounted() {
    window.getGoogleInfo = this.getGoogleInfo; // 关键：将方法注册为全局函数

    // 加载谷歌客户端库
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    document.head.appendChild(script);
  },
  methods: {
    getGoogleInfo(res) {
      // 处理登录成功逻辑
      console.log(res);
    },
  },
  
  // 其他代码...
}
</script>