在Nuxt3中无外部库使用Google ReCAPTCHA v3遇onSubmit函数找不到问题

问题根源很明确：<script setup> 里定义的函数属于模块局部作用域，不会自动挂载到全局 window 对象上，而Google ReCAPTCHA是从全局作用域查找指定的回调函数的，所以会触发找不到函数的错误。

以下是具体的解决步骤：

1. 将回调函数挂载到全局window对象 #

在<script setup>中，把你的提交逻辑函数挂载到window上，让ReCAPTCHA能访问到：

import { onUnmounted } from 'vue'

// 定义实际的登录处理逻辑
const handleLogin = () => {
  // 这里写你的表单验证、登录请求逻辑
  console.log('执行登录操作')
}

// 将回调函数挂载到全局window
window.onSubmit = () => {
  handleLogin()
}

// 组件卸载时清理全局函数，避免内存泄漏
onUnmounted(() => {
  delete window.onSubmit
})

2. 确保脚本加载顺序正确 #

如果是动态加载ReCAPTCHA脚本，要先挂载全局函数，再加载脚本，避免脚本加载完成时回调函数还未全局可用：

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  // 先挂载全局回调
  window.onSubmit = () => {
    // 你的业务逻辑
  }

  // 再加载ReCAPTCHA脚本
  const script = document.createElement('script')
  script.src = 'https://www.google.com/recaptcha/api.js'
  script.async = true
  script.defer = true
  document.head.appendChild(script)
})

onUnmounted(() => {
  delete window.onSubmit
})

3. 检查按钮的回调属性设置 #

模板里的提交按钮，data-callback属性必须是字符串形式的函数名，不能用Vue的绑定语法传递函数对象：

<!-- 正确写法 -->
<button 
  class="g-recaptcha"
  data-sitekey="你的ReCAPTCHA Site Key"
  data-callback="onSubmit"
>
  登录
</button>

<!-- 错误写法：不要用:data-callback绑定函数 -->
<!-- <button :data-callback="onSubmit">登录</button> -->

内容的提问来源于stack exchange，提问作者morteza mortezaie