Vue.js中loginForm.recaptcha始终为空，是否遗漏关键配置？

我来帮你搞定这个问题！你遇到的核心问题是 vue-recaptcha 原生不支持 v-model 双向绑定，所以你用v-model绑定loginForm.recaptcha根本没法拿到验证码的响应令牌，这就是值一直为空的原因。

下面是具体的修改方案：

1. 移除v-model，改用事件监听获取令牌 #

vue-recaptcha 提供了verify事件，当用户完成验证码验证时会触发这个事件并返回验证令牌，我们可以监听这个事件来更新loginForm.recaptcha的值；同时还要监听expired事件，在验证码过期时清空字段，避免提交无效数据。

2. 修改后的组件代码 #

<template>
  <div>
    <vue-recaptcha
      ref="recaptcha"
      sitekey="My key"
      @verify="handleRecaptchaVerify"
      @expired="handleRecaptchaExpired"
    ></vue-recaptcha>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        recaptcha: ''
      }
    }
  },
  methods: {
    handleRecaptchaVerify(response) {
      // 拿到验证令牌，赋值给表单字段
      this.loginForm.recaptcha = response;
    },
    handleRecaptchaExpired() {
      // 验证码过期时清空字段
      this.loginForm.recaptcha = '';
      // 可选：重置验证码组件，让用户可以重新验证
      this.$refs.recaptcha.reset();
    }
  }
}
</script>

3. 额外检查项 #

• 确保你的sitekey是有效的Google reCAPTCHA站点密钥（区分v2和v3，vue-recaptcha默认支持v2）
• 确认你的域名已经在Google reCAPTCHA控制台中添加为允许的域名，否则验证可能无法正常触发

这样修改后，当用户完成验证码验证时，loginForm.recaptcha就能正确拿到验证令牌了，过期时也会自动清空，避免无效提交。

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