Question

这是我在做什么：我有一个表单集组件，该组件通过ajax提取数据以填充表单集。用户可以从表单中修改这些数据并提交。

问题：效果很好。但是，我注意到，如果导航到另一页，然后单击浏览器的“返回上一页”按钮，则表单在那里（模板中的DOM）却是空的。 v模型输入字段中不再绑定任何数据...

有关此行为的大多数帖子都连接到vue-router，我不使用。

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

我也尝试过“保持生命”，但没有成功。

我在组件上放了一些详细的日志，以试图在浏览器返回时捕获生命周期钩子，但都没有打印出来...

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>

但是，实际上，自动完成功能默认情况下处于“开启”状态：

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

默认情况下启用持久性功能。设定值将autocomplete属性设置为off会禁用此功能。

我不记得为什么，但是我在表单中使用了autocomplete="off" ：-( ... 这可能就是为什么我没有看到太多关于它的帖子的原因...

现在，如果用户单击页面上的链接，然后使用“返回上一页”按钮向后导航，则将存在v-model绑定字段。

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

1 个答案: