Nuxtjs/Vuejs Form data are lost on navigating to different route and coming back to previous route using browser back button

Question

I am developing a Nuxtjs application and in that, I have a form, the user fills in the information and submits the form. After submission user is navigated to a different route. Now if the user clicks on the back button of browser then the user has navigated to form again but the data are reset in the field.

I want to ensure that when the user clicks on the browser back button then the data which was filled in by the user to be retained. I tried searching and found that we need to use autocomplete=on and I tried that but it's not working for me. Can someone please help me with how can I retain the user-provided information inform when the user navigates back to the route.

<template>
  <div id="eventForm" class="row" style="margin-top:1%">
    <form ref="testDataForm" class="form-horizontal" autocomplete="on" @submit.prevent="formSubmit">
      <input
        v-model="formData.eventCount"
        type="number"
        class="form-control"
        required
      >

      <b-form-select v-model="formData.optionsSelector" class="form-control">
        <b-form-select-option value="null" disabled selected>
          Choose
        </b-form-select-option>
        <b-form-select-option value="value1">
          Text1
        </b-form-select-option>
        <b-form-select-option value="value2">
          Text2
        </b-form-select-option>
      </b-form-select>
      <button type="submit" class="btn btn-success">
        Submit
      </button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        optionsSelector: null
      }
    }
  },
  methods: {
    formSubmit () {
      this.$router.push('/GenerateTestData')
      // this.$router.push({ path: '/GenerateTestData' })
    }
  }
}
</script>

<style>

</style>

kissu · Accepted Answer · 2021-09-13 07:25:41Z

1

You should use "keep-alive" to keep the rendered element.If you are using nuxt.js add this in your default.vue file: https://nuxtjs.org/docs/2.x/features/nuxt-components

<template>
    <v-app dark>
        <v-main>
            <v-container class="ma-0 pa-0" id="appContainer" fluid>
                <nuxt keep-alive/>
            </v-container>
        </v-main>
    </v-app>
</template>

edited Sep 13, 2021 at 7:25

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Sep 13, 2021 at 6:58

mokumus

3302 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kissu · Accepted Answer · 2021-09-13 06:56:14Z

1

You need to persist your data in some way. Either by getting the state back again (formData.optionsSelector) or by storing it in cookies/localStorage/else.

https://stackoverflow.com/a/66872372/8816585

So if you want to have it when you come back, you need to have a getter of the state rather than having it defaulting to null when the component is mounted.

À combo of a computed + Vuex could be the way too.

answered Sep 13, 2021 at 6:56

kissu

47.3k16 gold badges94 silver badges196 bronze badges

1 Comment

BATMAN_2008 Over a year ago

Thanks a lot for the response. I have already developed many components of the application again changing them to Vuex store would be difficult for me. I am planning to use keep-alive for now if things don't work well in the future then I will switch to Vuex. Thanks again.

Collectives™ on Stack Overflow

Nuxtjs/Vuejs Form data are lost on navigating to different route and coming back to previous route using browser back button

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related