How to display the preview of information entered by user using Vue JS?

Question

I have created a form using VueJS and information is stored in Google Firebase. I need to show the preview of the information entered by the user before submitting the form.

Is there a way in VueJS to display a preview of the information entered?

Answer 1

You can do this by following the below steps-

1. Set-up Vuex in your project. (Vuex is a state management pattern + library for Vue.js applications.)
2. Install vuex-map-fields. (Enable two-way data binding for form fields saved in a Vuex store.)
3. Install vuex-persistedstate (Persist and rehydrate your Vuex state between page reloads.)

When you will bind your form variables, using map-fields, it will sync with the Vue state which will save the record, even on page reload with the help of vuex-persistedstate.

So, before submitting the form, if the user reloads the page, the data will be saved into the state and the preview will still there.

Here is an example of a form and preview of user-entered data, and on-page reload the data will be saved.