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

问题

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.

Problem : This work well. However, I noticed that if i navigate to another page and then hit the browser "go back one page" button, the form is there (the DOM in the template) but empty. There is no data bound in v-model input fields anymore...

Most posts about this behavior are connected to vue-router, that I do not use.

I think it might have to deal with lifecycle hooks... Actually, on my component, I fetch the data when "mounted". But, if so, which lifecycle ?

I also tried "keep-alive" without success.

I put some verbose log on my component to try to catch the lifecycle hook when browser going back and none of them printed...

beforeCreate: function() {
    console.log('---- BEFORE CREATE ----> ')
},
created: function() {
    console.log('---- CREATED ----> ')
    this.getModelObjects();
},
beforeMount: function() {
    console.log('---- BEFORE MOUNT ----> ')
},
mounted: function() {
    console.log('---- MOUNTED ---->')
    this.getModelObjects();
},
beforeUpdate: function() {
    console.log('---- BEFORE update ----> ')
},
updated: function() {
    console.log('---- UPDATED ----> ')
},
beforeDestroy: function() {
    console.log('---- BEFORE DESTROY ----> ')
},
destroyed: function() {
    console.log('----  DESTROYED ----> ')
},

Any idea?

回答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.

来源：https://stackoverflow.com/questions/52762493/vue-js-form-data-binding-lost-when-browser-going-back-to-the-page

标签

forms

Vue.js

vuejs2

vue-component

v-model