After searching for two hours, I still can't figure out what I'm doing wrong. I'm hoping someone can assist me with my issue:
Essentially, the problem is quite simple. I have a reusable component for Recaptchas. The specific element causing trouble is a textfield within a popup dialog for "forgot password" (above the login form).
The basic approach to handling multiple captchas on the same page is as follows:
- I have a Vuex field for each potential captcha, initialized to
null. - Upon clicking a form submit button, a mutation is triggered that sets the captcha field to
0. - I've set up watchers in the recaptcha component to listen for changes, and if the value equals
0, start evaluating the captcha. - Upon validation, invoking another mutation saves the result to Vuex. A separate watcher then checks for
newValand submits the data.
In theory, this should work seamlessly. I believe it has worked before, but after some recent modifications, it's behaving erratically.
To be precise: upon clicking the button once, everything seems fine, except one particular watcher fires twice when it shouldn't at all.
if (!this.running) {
this.running = true
console.log('forgot watcher 2')
this.$refs.recaptcha.execute()
}
Despite using the condition above, it doesn't function as expected. It appears to run simultaneously, which is confusing to me.
The console output demonstrates this dilemma:
submit
verify forgot captcha
0
forgot watcher 2
0
forgot watcher 2
verified
forgot captcha verified 03AOLTBLTP...............
forgot watcher
verified
forgot watcher
Here is a simplified sequence of events:
- Click on login.vue
- Mutation sets the value to 0
- Watcher in recaptcha.vue detects the change and starts evaluation (unfortunately, this trigger erroneously occurs twice)
- If verified,
verifyCaptcha()in recaptcha.vue stores the information in Vuex
Below are snippets from relevant files:
login.vue
<template>
<v-form
@submit.prevent="twoFaRequired ? sendTwoFa() : verifyLoginCaptcha()"
>
// ...
<recaptcha />
// ...
<v-layout>
<form>
// ...
<recaptcha />
<v-btn
color="primary"
:loading="forgotLoading"
:disabled="successful || forgotLoading || $v.$invalid"
@click.native.stop.prevent="verifyForgotCaptcha"
>Reset Password</v-btn>
//...
methods: {
verifyForgotCaptcha() {
console.log('submit')
this.$store.commit('user/VERIFY_FORGOT_CAPTCHA')
},
//...
watch: {
forgotCaptcha(newVal, oldVal) {
if (newVal) {
console.log('forgot watcher')
this.sendForgotEmail()
}
},
//...
forgotCaptcha() {
return this.$store.state.user.forgotCaptcha
},
mutations.js
//...
VERIFY_FORGOT_CAPTCHA(state) {
console.log('verify forgot captcha')
state.forgotCaptcha = 0
},
FORGOT_CAPTCHA_VERIFIED(state, payload) {
console.log('forgot captcha verified', payload)
state.forgotCaptcha = payload
},
//...
recaptcha.vue
<template>
<div class="d-flex justify-center">
<vue-recaptcha
ref="recaptcha"
:sitekey=siteKey
:loadRecaptchaScript="true"
size="invisible"
@verify="verifyCaptcha">
</vue-recaptcha>
</div>
</template>
<script>
import VueRecaptcha from 'vue-recaptcha'
import { mapGetters } from 'vuex'
export default {
data: () => ({
running: false,
usage: '',
siteKey: 'xxxxxxx'
}),
components: { VueRecaptcha },
computed: {
...mapGetters([
'user'
]),
//...
isForgotCaptcha() {
return this.$store.getters['user/forgotCaptcha']
}
},
methods: {
verifyCaptcha(response) {
console.log('verified')
//...
if (this.usage === 'forgot') this.$store.commit('user/FORGOT_CAPTCHA_VERIFIED', response)
this.usage = ''
this.$refs.recaptcha.reset()
}
},
watch: {
//...
isForgotCaptcha(newVal) {
if (newVal === 0) {
console.log('forgot watcher 2')
this.usage = 'forgot'
this.$refs.recaptcha.execute()
}
},
}
};
</script>
If additional information or code is required, please don't hesitate to ask. I appreciate any insight into where I might be going wrong. Thank you!