当我得到 vue_1.ref 不是函数错误时，如何使用 uve-recaptcha-v3 在 VueJS 中使用 Recaptcha v3？

Question

我在 VueJS 应用程序中使用vue-recaptcha-v3，但立即出现错误。我的 main.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')

不幸的是，当我点击保存时，出现以下错误（包括截图）：

未捕获的类型错误：vue_1.ref 不是函数

这与 vue-recaptcha-v3 包的以下部分有关：

exports.VueReCaptcha = {
    install: function (app, options) {
        var isLoaded = vue_1.ref(false);
        var instance = vue_1.ref(undefined);

不知道从这里去哪里......

Answer 1

我遇到了同样的问题，似乎最新的软件包版本有这个明显的运行时错误。但是 1.9.0 版效果很好。因此，如果您使用 yarn 运行以下命令（否则为 npm 等效项），只需删除当前包：

yarn add vue-recaptcha-v3@1.9.0

Answer 2

如果包的类型对您的需求影响不大。这是我使用的并且对我有用的一个。链接： 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>

如果您发现这对于您的项目不可行。没问题，因为我仍然认为你可以帮助其他初学者。