如何顯示用戶使用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 中，並且預覽仍然存在。

這是用戶輸入數據的表單和預覽示例，頁面重新加載數據將被保存。