本文介绍了当浏览器返回页面时,Vue.js表单数据绑定丢失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我在做什么:我有一个表单集组件,该组件通过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模型输入字段中不再绑定任何数据...

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 ?

我也尝试过保持生命",但没有成功.

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".

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

我不记得为什么,但是我在表单中使用了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表单数据绑定丢失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-04 06:31
查看更多