当浏览器返回页面时，Vue.js表单数据绑定丢失 [英] Vue.js form data binding lost when browser going back to the page

问题描述

这是我在做什么: 我有一个表单集组件，该组件通过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会禁用此功能.

The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature.

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