如何显示用户使用Vue JS输入的信息的预览？

Question

我使用 VueJS 创建了一个表单，信息存储在 Google Firebase 中。 在提交表单之前，我需要显示用户输入的信息的预览。

VueJS 中有没有办法显示输入信息的预览？

Answer 1

您可以按照以下步骤执行此操作 -

1. 在你的项目中设置Vuex 。 （Vuex 是 state 管理模式 + 用于 Vue.js 应用程序的库。）
2. 安装vuex-map-fields 。 （为保存在 Vuex 存储中的表单字段启用双向数据绑定。）
3. 安装vuex-persistedstate （在页面重新加载之间持久化和补充你的 Vuex state。）

当您使用 map-fields 绑定表单变量时，它将与 Vue state 同步，这将保存记录，即使在页面重新加载时借助 vuex-persistedstate 也是如此。

因此，在提交表单之前，如果用户重新加载页面，数据将保存到 state 中，并且预览仍然存在。

这是用户输入数据的表单和预览示例，页面重新加载数据将被保存。