收到vue_1.ref时如何使用uve-recaptcha-v3将Recaptcha v3与VueJS一起使用不是功能错误？

问题描述

我在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')

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

未捕获的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.9.0很好用。因此，如果您使用yarn，请运行以下命令（否则等价于npm）删除当前软件包：

yarn add vue-recaptcha-v3@1.9.0

,

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

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

,

vue-recaptcha-v3主分支现在正在使用Vue 3。

您可能正在使用Vue 2，因此应遵循here的说明。