Vue.js 浏览器返回页面时表单数据绑定丢失

Question

这是我正在做的事情：我有一个表单集组件，它通过 ajax 获取数据以填充表单集。用户可以从表单修改这些数据并提交。

问题：这很好用。但是，我注意到如果我导航到另一个页面然后点击浏览器 "go back one page" 按钮，表单就在那里（模板中的 DOM）但是是空的。 v-model 输入字段中不再有数据绑定...

大多数关于此行为的帖子都与我不使用的 vue-router 有关。

我认为它可能必须处理生命周期挂钩... 实际上，在我的组件上，我在 "mounted" 时获取数据。但是，如果是这样，哪个生命周期？

我也试过"keep-alive"没成功。

我在我的组件上放了一些详细的日志，试图在浏览器返回时捕获生命周期挂钩，并且 none 打印了它们...

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 ----> ')
},

有什么想法吗？

Answer 1

好的，我用最简单的方法解决了这个问题！

实际上，使用localStorage（https://fr.vuejs.org/v2/cookbook/client-side-storage.html）并不能解决问题。

无论如何，它需要绑定到生命周期钩子才能被触发。因此，由于我已经使用 Axios 将后端数据库上的这些数据同步，这会增加冗余的复杂性并最终导致同样的问题。

我还注意到只有 v-model 字段是相关的。 {{ var }} 不是。所以，我最终认为这真的与表格有关。

相反，我在表格中使用了 autocomplete="on"。

<form method="post" autocomplete="on">
.....
</form>

但是，事实上，默认情况下自动完成是 "on" :

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" :-( ... 这可能就是为什么我没有看到太多关于它的帖子...

现在，如果用户单击页面上的 link，然后使用 "go one page back" 按钮向后导航，v-model 绑定字段就在那里。

Vue.js 浏览器返回页面时表单数据绑定丢失

Vue.js form data binding lost when browser going back to the page

forms

vue.js

vue-component

vuejs2

v-model