5

In a login page, I have a Google reCAPTCHA. It works as intended, but if I navigate to another page, and then return via the browser's back button, or by typing the URL in the browser, everything works except said reCAPTCHA. For it to work again, I need to reload the page. I get the same results when using Materialize with Vue. The components won't "reset" when back on the page.

Tried to use keep-alive (even if that sounds wrong), tried various Vue lifecycle hooks (created, beforeMount, mounted), tried to keep the code in a function which I then called in the lifecycle hooks. Nothing seems to work. I searched Google and even here, but maybe I'm using the wrong search terms, as I couldn't find a solution to the problem.

Can someone shed light on the problem? I can try to provide code if needed.

2
  • 2
    Please add an minimal reproducible example.
    – zero298
    Commented Jul 19, 2019 at 16:47
  • 1
    Pretty interesting case, do you have a simple example (not all your code) but a minimalist bit of code that reproduces the same thing with the same libs that you’re using ?
    – Ryo Shiina
    Commented Jul 19, 2019 at 19:14

1 Answer 1

2

It's hard to give 100% sure answer when there is no reproduction supplied but this is what might work:

Try adding key parameter to router-view:

<router-view :key="$route.path" />

Or even on a component you want to be re-rendered:

<component-with-recaptcha :key="$route.fullPath"></component-with-recaptcha>