验证码未在 vue.js laravel 5.6.7 中呈现

Question

我正在尝试将 recaptcha 合并到 vue.js 中，我也在使用 Laravel 5.6.7

用于验证码的 Vue 包

https://github.com/DanSnow/vue-recaptcha#install

刀片

<div class="col-md-8">
    <login></login>
</div>

app.js

import VueRecaptcha from 'vue-recaptcha';
Vue.use(VueRecaptcha);

Vue.component('login', require('./components/login.vue'));

vue.js 中的登录组件

<template>
    <div>
        <div class="form-group row">
            <div class="col-md-6">
                <div class="g-recaptcha" data-sitekey="My site key">
                </div>
            </div>
        </div>
    </div>
</template>

问题

我为验证码放置了 div，但它没有呈现任何内容。我错过了什么吗？

Answer 1

如documentation 中所述，VueRecaptcha 已作为组件导入并添加到其中。

import VueRecaptcha from 'vue-recaptcha';
export default {
    ...
    components: { VueRecaptcha }
};

在模板中声明使用vue-recaptcha 标签。

<vue-recaptcha sitekey="Your key here">
    <button>Click me</button>
</vue-recaptcha>