Vue.js form data binding lost when browser going back to the page

Question

Here is what I am doing : I have a form set component that fetch data through ajax to populate the form set. The user may modify those datas from the form and submit.

Pr

Answer 1

OK, I solved this problem in the most easiest way possible!

Actually, using localStorage (https://fr.vuejs.org/v2/cookbook/client-side-storage.html), would not solve the problem.

In anyway, it needs to be tied to a lifecycle hook in order to be triggered. Therefore, as I already sync those datas on a backend database with Axios, this would add redundant complexity and end up with the same problem.

I also noticed that only v-model fields where concerned. {{ var }} were not. So, I ended up thinking this was really related to forms.

Instead, I used autocomplete="on" in my forms.

<form method="post" autocomplete="on">
.....
</form>

But, in fact, autocomplete is "on" by default :

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature.

I don't remember why, but I used autocomplete="off" in my forms :-( ... This might be why I don't see much posts about it...

Now, if a user click to a link on the page, and then navigate backward with the "go one page back" button, v-model binded fields are there.