提问人：Johnny John Boy 提问时间：11/10/2020 更新时间：12/16/2020 访问量：4271
当我得到 vue_1.ref 不是函数错误时，如何使用 uve-recaptcha-v3 将 Recaptcha v3 与 VueJS 一起使用？
How to use Recaptcha v3 with VueJS using uve-recaptcha-v3 when I get a vue_1.ref is not a function error?
问：
我在 VueJS 应用程序中使用 vue-recaptcha-v3，但立即收到错误。我的主 .js 看起来像这样：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, { siteKey: 'MYSITEKEY' })
Vue.use(Buefy)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
不幸的是，当我点击保存时，我收到以下错误（包括屏幕截图）：
未捕获的 TypeError：vue_1.ref 不是函数
它与 vue-recaptcha-v3 软件包的以下部分有关：
exports.VueReCaptcha = {
install: function (app, options) {
var isLoaded = vue_1.ref(false);
var instance = vue_1.ref(undefined);
不知道该何去何从......
答：
1赞
Rafael Furtado
11/10/2020
#1
如果包装的类型对您需要的内容影响不大。这是我使用的，对我有用。 链接： https://www.npmjs.com/package/vue-recaptcha 安装后，您只需要将其导入到您的表单中即可。
import VueRecaptcha from 'vue-recaptcha';
用：
<vue-recaptcha
@expired="captchar = false"
class="mr-8"
@render="cargarCaptchar = true"
@error="captchar = false"
@verify="captchar = true"
sitekey="your code"/>
如果这不起作用，请将以下标记添加到页眉：
<script src = "https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" defer> </script>
如果您发现这对您的项目不可行。没问题，因为我仍然认为你可以帮助其他初学者。
评论
0赞
veryxcit
12/9/2020
这仅适用于 recaptcha v2，他正在研究无摩擦的 v3，所以软件包确实很重要
12赞
veryxcit
12/9/2020
#2
我遇到了同样的问题，似乎最新的软件包版本有这个明显的运行时错误。但是，版本 1.9.0 效果很好。因此，如果您使用 yarn，只需删除当前包，请运行以下命令（否则为 npm 等效项）：
yarn add [email protected]
评论
0赞
Oranit Dar
12/24/2020
同样的问题在这里，对我有用，10 倍!!顺便一提。。。你也收到这个控制台错误吗？未捕获的 DOMException：阻止原点为“google.com”的帧访问跨源帧。在 <匿名>：1：16
4赞
Linuslabo
12/16/2020
#3
vue-recaptcha-v3 master 分支现在使用 Vue 3。
你可能正在使用 Vue 2，所以你应该按照这里的说明进行操作。
评论
0赞
A Kingscote
7/27/2021
npm install vue-recaptcha-v3@^1.9.0
评论