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

Question

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

是否有一种方法在VueJS中显示输入信息的预览?

Answer 1

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

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

当你使用map-fields绑定表单变量时，它将与Vue状态同步，从而保存记录，即使在使用Vue -persistedstate的帮助下重新加载页面。

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

这是一个表单和预览用户输入数据的例子，并且在页面重新加载时数据将被保存。