浏览器返回页面时，Vue.js 表单数据绑定丢失 [英] 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?

解决方案

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.

这篇关于浏览器返回页面时，Vue.js 表单数据绑定丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！