问题描述
这是我在做什么:我有一个表单集组件,它通过 ajax 获取数据来填充表单集.用户可以从表单中修改这些数据并提交.
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.
问题:这很好用.但是,我注意到如果我导航到另一个页面然后点击浏览器返回一页"按钮,表单在那里(模板中的 DOM)但是是空的.v-model 输入字段中不再有数据绑定...
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...
大多数关于此行为的帖子都与我不使用的 vue-router 相关.
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 ?
我也尝试过keep-alive"但没有成功.
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 ----> ')
},
有什么想法吗?
推荐答案
好的,我用最简单的方法解决了这个问题!
OK, I solved this problem in the most easiest way possible!
实际上,使用 localStorage
(https://fr.vuejs.org/v2/cookbook/client-side-storage.html),不能解决问题.
Actually, using localStorage
(https://fr.vuejs.org/v2/cookbook/client-side-storage.html), would not solve the problem.
无论如何,它需要绑定到生命周期钩子才能被触发.因此,由于我已经将后端数据库上的这些数据与 Axios 同步,这会增加冗余的复杂性并最终出现相同的问题.
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.
我还注意到只有 v-model 字段是相关的.{{ var }} 不是.所以,我最终认为这真的与形式有关.
I also noticed that only v-model fields where concerned. {{ var }} were not. So, I ended up thinking this was really related to forms.
相反,我在表单中使用了 autocomplete="on"
.
<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
持久化功能默认开启.设置值关闭自动完成属性禁用此功能.
我不记得为什么,但我在表单中使用了 autocomplete="off"
:-( ...这可能就是为什么我没有看到太多关于它的帖子......
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...
现在,如果用户单击页面上的链接,然后使用返回一页"按钮向后导航,则存在 v-model 绑定字段.
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 表单数据绑定在浏览器返回页面时丢失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!