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

持久化功能默认开启.设置值关闭自动完成属性禁用此功能.

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屋！