Как использовать Recaptcha v3 с VueJS, используя uve-recaptcha-v3, когда я получаю vue_1.ссылка не является ошибкой функции?

#vue.js #recaptcha-v3

Вопрос:

Я использую vue-recaptcha-v3 в приложении VueJS, но сразу же получаю сообщение об ошибке. Мой 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);

Не уверен, куда идти дальше…

Ответ №1:

У меня была такая же проблема, кажется, что самая последняя версия пакета имеет эту очевидную ошибку во время выполнения. Однако версия 1.9.0 отлично работает. Поэтому просто удалите текущий пакет, если вы используете yarn, выполните следующее (в противном случае эквивалент npm):

 yarn add vue-recaptcha-v3@1.9.0

1. Та же проблема здесь, сработала для меня, в 10 раз!!! Кстати… вы тоже получаете эту ошибку консоли? Неперехваченное исключение DOMException: заблокирован фрейм с источником » google.com » из-за доступа к фрейму с перекрестным происхождением. в <анонимный>:1:16

Ответ №2:

основная ветка vue-recaptcha-v3 теперь использует Vue 3.

Вероятно, вы используете Vue 2, поэтому вам следует следовать приведенным здесь инструкциям.

Ответ №3:

Если тип пакета не сильно влияет на то, что вам нужно. вот тот, который я использую, и который работает для меня. Ссылка: 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=vueRecaptchaApiLoadedamp;render=explicit" defer> </script>

Если вы обнаружите, что это невозможно для вашего проекта. Нет проблем, так как я все еще думаю, что вы можете помочь другим новичкам.