Nuxtjs/Vuejs 表单数据在导航到不同路线并使用浏览器后退按钮返回到先前路线时丢失

Question

我正在开发一个 Nuxtjs 应用程序，其中有一个 form，用户填写信息并提交表格。提交后，用户被导航到另一个 route。现在，如果用户单击 back button of browser，则用户已再次导航至 form，但该字段中的数据已重置。

我想确保当用户点击浏览器后退按钮时，用户填写的数据将被保留。我尝试搜索并发现我们需要使用 autocomplete=on 我试过了，但它对我不起作用。有人可以帮助我如何在用户导航回 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>

Answer 1

您需要以某种方式保存您的数据。通过再次获取状态 (formData.optionsSelector) 或将其存储在 cookies/localStorage/else.

中

所以如果你想在回来时拥有它，你需要有一个 getter 的状态，而不是在组件安装时默认为 null。

- computed + Vuex 的组合也可以。

Answer 2

您应该使用“keep-alive”来保持渲染的 element.If 您正在使用 nuxt.js 在您的 default.vue 文件中添加： 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>

Nuxtjs/Vuejs 表单数据在导航到不同路线并使用浏览器后退按钮返回到先前路线时丢失

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

forms

vue.js

autocomplete

nuxt.js

bootstrap-vue