Question

在使用Vue组件使用AJAX表单提交时，我有一个关于使用Google的Invisible Recaptcha的问题。

我创建了一个VueJS组件，我将其包含在以下＆＃39; recaptcha按钮＆＃39;组件：

<template>
    <div>
        <div v-if="failed" style="color: red;"><strong>Sorry, the captcha validation failed. Please try again.</strong></div>
        <div :id="name"></div>

        <button :class="classes" type="button" @click="validate()">
            <slot>Submit</slot>
        </button>
    </div>
</template>

<script>

export default {
    props: {
        name: {
            type: String,
            default: 'recaptcha',
            required: false
        },
        classes: {
            type: String,
            required: false,
            default: ''
        },
    },
    data: function ()
    {
        return {
            failed: false,
        };
    },
    mounted: function ()
    {
        this.initReCaptcha();
    },
    methods: {
        initReCaptcha: function() {
            var self = this;
            setTimeout(function() {
                if(typeof grecaptcha === 'undefined') {
                    self.initReCaptcha();
                }
                else {
                    grecaptcha.render(self.name, {
                        sitekey: 'site-key-here',
                        size: 'invisible',
                        badge: 'inline',
                        callback: self.response
                    });
                }
            }, 100);
        },
        validate: function ()
        {
            grecaptcha.execute();
        },
        response: function (token)
        {
            this.$parent.fields['g-recaptcha-response'] = token;
            this.$parent.submit();
        }
    },

}

</script>

正如您所看到的，我已将Google的Recaptcha回调功能分配给重新接收组件的当前响应功能＆＃39;功能。但是，当我提交其中一个表单时，似乎是在页面上调用其他组件的响应函数..因此尝试在到目前为止没有输入的表单上调用submit ..

我们认为可能是recaptcha渲染实际上没有创建两个实例的情况，因此在第二个实例上，回调只是被覆盖，而是通过记录已安装函数中的组件，形式为＆＃39; s被提交而不是我们尝试提交的那个被首先实例化，这使我们相信它不是覆盖的情况...

非常感谢任何有关此事的帮助！

干杯， PM

Answer 1

想出这个，不知道render函数返回了widget ID。如果没有给出可选的小部件ID参数，grecaptcha.execute（）将只执行全局列表中的第一个小部件。

要解决此问题，请将呈现函数返回的窗口小部件ID分配给组件中的数据属性，然后在validate函数内，使用该窗口小部件ID作为参数调用execute。

^(.*?)(\b/path1/path2/create.action\b)(.*)$

使用VueJS的多个Google Recaptcha

1 个答案: