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?
keep-alivewill only work in this case if you're navigating withvue-routerthroughout your pages. If you actually perform a refresh or or a full page load, then this method won't work. Maybe what you want isvuexor alocalStoragesolution.