Vuejs2 我的表单上的vue recaptcha元素不可见
在我导入的Laravel 5/vuejs 2.6中， 我在网站注册并获得了应用程序密钥、网站密钥和密钥。 我在我的vue表单中插入了代码，吊牌中没有错误，但在我的表单上看不到captcha元素。 我按照小表格中的说明进行操作：Vuejs2 我的表单上的vue recaptcha元素不可见,vuejs2,captcha,Vuejs2,Captcha,在我导入的Laravel 5/vuejs 2.6中， 我在网站注册并获得了应用程序密钥、网站密钥和密钥。 我在我的vue表单中插入了代码，吊牌中没有错误，但在我的表单上看不到captcha元素。 我按照小表格中的说明进行操作： <template> <div class="container"> <div class="row p-5 row_content" style="border: 2px dotted green; ">
<template>
<div class="container">
<div class="row p-5 row_content" style="border: 2px dotted green; ">
test_recaptcha::{{ test_recaptcha}}
<vue-recaptcha
sitekey="6LfI0bQUAAAAAPp4DXULsAZBoWPImkMFNwhosVJl"
>
</vue-recaptcha>
</div>
is_page_loaded::{{ is_page_loaded}}<br>
</div>
</template>
<script>
import {bus} from '../../app';
import Vue from 'vue';
import VueRecaptcha from 'vue-recaptcha'; // https://github.com/DanSnow/vue-recaptcha
Vue.component('vue-recaptcha', VueRecaptcha);
export default {
data: function () {
return {
message: '',
show: false,
is_page_loaded: false,
test_recaptcha:null,
}
},
name: 'test',
// mixins: [appMixin],
components: {
VueRecaptcha
},
computed: {
},
mounted() {
console.log('Test Component mounted.')
},
methods: {
recaptchaVerified(response) {
console.log("recaptchaVerified response::")
console.log( response )
this.pleaseTickRecaptchaMessage = '';
this.is_recaptcha_verified = true;
},
recaptchaExpired() {
this.pleaseTickRecaptchaMessage = '';
this.is_recaptcha_verified = false;
},
},
}
</script>
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "crosshttps://github.com/BinarCode/vue-form-wizard-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.4.0",
"laravel-mix": "^4.0.15",
"lodash": "^4.17.15",
"popper.js": "^1.15.0",
"resolve-url-loader": "^2.3.2",
"sass": "^1.19.0",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^12.3.1",
"@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
"font-awesome": "^4.7.0",
"laravel-echo": "^1.5.3",
"marked": "^0.7.0",
"moment-timezone": "^0.5.26",
"pusher-js": "^4.4.0",
"v-tooltip": "^2.0.2",
"vee-validate": "^2.2.5",
"vee-validate-laravel": "^1.1.0",
"vue-carousel": "^0.18.0",
"vue-color": "^2.7.0",
"vue-easy-slider": "^5.2.10",
"vue-focus": "^2.1.0",
"vue-form-wizard": "^0.8.4",
"vue-js-modal": "^1.3.28",
"vue-jstree": "^2.1.6",
"vue-moment": "^4.0.0",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.16",
"vue-recaptcha": "^1.2.0",
"vue-router": "^3.0.6",
"vue-select": "^2.6.4",
"vue-slider-component": "^3.0.33",
"vue-stepper": "^1.4.2",
"vue-upload-component": "^2.8.20",
"vue-wysiwyg": "^1.7.2",
"vue2-datepicker": "^2.11.2",
"vue2-filters": "^0.6.0",
"vuejs-paginate": "^2.1.0",
"vuex": "^3.1.0"
}
}
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "crosshttps://github.com/BinarCode/vue-form-wizard-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"jquery": "^3.4.0",
"laravel-mix": "^4.0.15",
"lodash": "^4.17.15",
"popper.js": "^1.15.0",
"resolve-url-loader": "^2.3.2",
"sass": "^1.19.0",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"@ckeditor/ckeditor5-build-classic": "^12.3.1",
"@ckeditor/ckeditor5-vue": "^1.0.0-beta.2",
"font-awesome": "^4.7.0",
"laravel-echo": "^1.5.3",
"marked": "^0.7.0",
"moment-timezone": "^0.5.26",
"pusher-js": "^4.4.0",
"v-tooltip": "^2.0.2",
"vee-validate": "^2.2.5",
"vee-validate-laravel": "^1.1.0",
"vue-carousel": "^0.18.0",
"vue-color": "^2.7.0",
"vue-easy-slider": "^5.2.10",
"vue-focus": "^2.1.0",
"vue-form-wizard": "^0.8.4",
"vue-js-modal": "^1.3.28",
"vue-jstree": "^2.1.6",
"vue-moment": "^4.0.0",
"vue-nav-tabs": "^0.5.7",
"vue-notification": "^1.3.16",
"vue-recaptcha": "^1.2.0",
"vue-router": "^3.0.6",
"vue-select": "^2.6.4",
"vue-slider-component": "^3.0.33",
"vue-stepper": "^1.4.2",
"vue-upload-component": "^2.8.20",
"vue-wysiwyg": "^1.7.2",
"vue2-datepicker": "^2.11.2",
"vue2-filters": "^0.6.0",
"vuejs-paginate": "^2.1.0",
"vuex": "^3.1.0"
}
}