Cannot read properties of undefined (reading '$recaptcha')

Question

I'm trying to integrate CAPTCHA verification with my contact page, I was following the documentation from @nuxtjs/recaptcha but I'm getting the error Cannot read properties of undefined (reading '$recaptcha') every time I want to access the variable to get the response.

Tried using v2 and v3. This is the config of the module:

recaptcha: {
    version: '3',
    hideBadge: false,
    size: 'normal',
    siteKey: 'secret'
  },

I am accesing the variable like this, it's how they are accessing it in the documentation. (in v2)

onSubmit: async () => {
      try {
        const token = await this.$recaptcha.getResponse();
        console.log('Token:', token);

        this.$recaptcha.reset();
      } catch (error) {
        console.error(error);
      }
    }

I can give more information about the code if necessary. Any help is welcome!

Answer 1

I found out why it was printing undefined.

In conclusion, I can't use this keyword when using arrow functions. I had to declare the function with the function keyword and then I was able to print $recaptcha$.