Javascript Nuxt js保留旧的输入值

我试图建立一个应用程序，用户输入一些数据，然后按下按钮进入下一步。问题是，当我在下一页时，我有另一个按钮，它会将您带回到上一步，该页面呈现所有内容，但输入是空的，我希望显示以前输入的数据。我的第一页看起来像这样

<template>
<div class="py-4">
  <h1 class="text-center text-4xl py-5">Welcome!</h1>
  <div class="max-w-4xl flex m-auto">
    <div class="shadow-lg bg-white rounded-lg py-10 px-20 flex flex-col justify-between leading-normal">
      <div class="mb-3 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative alert" role="alert" v-if="errors.length">
        <strong class="font-bold">Please correct the following error(s):</strong>
        <p>
          <ul>
            <li v-for="error in errors">{{ error }}</li>
          </ul>
        </p>
        <span class="absolute top-0 bottom-0 right-0 px-4 py-3">
          <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" @click="dismiss">
            <title>Close</title>
            <path
              d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
          </svg>
        </span>
      </div>

      <div class="mb-8">
        <div class="text-gray-900 font-bold text-xl mb-2">Terms of Use</div>
        <ul class="list-disc ml-10">
          <li>Glider requires some personally-identifiable information (name, email, etc.) in order to complete this
            assessment.</li>
          <li>To understand more about our privacy policy, data capture, data processing, etc., you can read our
            privacy policy and terms and service.</li>
        </ul>
      </div>
      <div class="flex items-center">
        <div class="mb-4 w-2/4">
          <label class="text-gray-700 leading-none" for="location">
            Current location<span class="text-red-600">*</span>
          </label>
          <select class="block appearance-none w-100 bg-white border border-gray-400 hover:border-gray-500 py-2 rounded shadow leading-tight mt-2" v-model="country" :value="country" name="location">
            <option v-for="country in countries" v-bind:key="country.code" v-bind:value="country.name">
              {{country.name}}</option>
          </select>
        </div>
        <div class="mb-4 w-2/4">
          <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
            City, State
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight" id="username" type="text" placeholder="City, State" v-model="state">
        </div>
      </div>

      <div class="bg-blue-100 border border-blue-200 rounded text-blue-700 px-4 py-3" role="alert">
        <input type="checkbox" name="terms" v-model="terms" />
        <label for="terms" class="text-sm align-middle">I agree to the above terms..</label>
      </div>
      <a class="mt-4 m-auto duration-75 text-center w-1/4 bg-green-500 cursor-pointer hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full" @click="submit">
        Next Step
      </a>

    </div>

  </div>
</div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      errors: [],
      state: this.state,
      country: this.country,
      terms: this.terms,
      countries: [{
          name: 'Afghanistan',
          code: 'AF'
        },
        {
          name: 'Åland Islands',
          code: 'AX'
        },
        ...
      ]
    }
  },
  methods: {
    submit: function(e) {
      this.errors = [];
      if (!this.state) {
        this.errors.push('State is required!');
        return;
      }
      if (!this.country) {
        this.errors.push('Country is required!');
      }
      if (!this.terms) {
        this.errors.push('You need to accept the terms!');
      }
      if (this.errors.length == 0) {
        this.$router.push("details")
      }

    },
    dismiss: function(e) {
      this.errors = [];
    }
  }
}
</script>
<style scoped>
ul>li {
  margin-top: 10px;
}
</style>

欢迎
请更正以下错误：


{{error}


接近
使用条款

Glider需要一些个人识别信息（姓名、电子邮件等）才能完成此操作
评估
要了解更多有关我们的隐私政策、数据捕获、数据处理等的信息，您可以阅读我们的
隐私政策、条款和服务

当前位置*
{{country.name}
城市、州
我同意上述条款。。
下一步
导出默认值{
组件：{}，
数据（）{
返回{
错误：[]，
州：这个州，
国家：这个国家，
术语：这个术语，
国家：[{
名称：“阿富汗”，
代码：“AF”
},
{
名称：“奥兰群岛”，
代码：“AX”
},
...
]
}
},
方法：{
提交：职能（e）{
this.errors=[]；
如果（！this.state）{
this.errors.push（'State is required！'）；
返回；
}
如果（！this.country）{
this.errors.push（'需要国家！'）；
}
如果（！this.terms）{
this.errors.push（'您需要接受条款！'）；
}
if（this.errors.length==0）{
此.$router.push（“详细信息”）
}
},
解散：职能（e）{
this.errors=[]；
}
}
}
ul>li{
边缘顶部：10px；
}

---

当用户返回到

/

路线时，如何显示数据？

通过使用

localStorage

实现了结果

<script>
export default {
  components: {},
  data() {
    return {
      errors: [],
      state: localStorage.getItem('state'),
      country: localStorage.getItem('country'),
      terms: localStorage.getItem('terms'),
      countries: [{
          name: 'Afghanistan',
          code: 'AF'
        },
        {
          name: 'Åland Islands',
          code: 'AX'
        },
       ...
      ]
    }
  },
  methods: {
    submit: function(e) {
      this.errors = [];
      if (!this.state) {
        this.errors.push('State is required!');
      }
      if (!this.country) {
        this.errors.push('Country is required!');
      }
      if (!this.terms) {
        this.errors.push('You need to accept the terms!');
      }
      if (this.errors.length == 0) {
        console.log(this.country,this.state,this.terms);
        let terms_of_use = {'country': this.country, 'state': this.state, 'terms': this.terms};
        localStorage.setItem('country', this.country);
        localStorage.setItem('state', this.state);
        localStorage.setItem('terms', this.terms);
        this.$router.push("details")
      }

    },
    dismiss: function(e) {
      this.errors = [];
    }
  }
}
</script>

导出默认值{
组件：{}，
数据（）{
返回{
错误：[]，
状态：localStorage.getItem（'state'），
国家/地区：localStorage.getItem（'country'），
术语：localStorage.getItem（'terms'），
国家：[{
名称：“阿富汗”，
代码：“AF”
},
{
名称：“奥兰群岛”，
代码：“AX”
},
...
]
}
},
方法：{
提交：职能（e）{
this.errors=[]；
如果（！this.state）{
this.errors.push（'State is required！'）；
}
如果（！this.country）{
this.errors.push（'需要国家！'）；
}
如果（！this.terms）{
this.errors.push（'您需要接受条款！'）；
}
if（this.errors.length==0）{
log（this.country，this.state，this.terms）；
让terms_of_使用={'country'：this.country，'state'：this.state，'terms'：this.terms}；
localStorage.setItem（'country'，this.country）；
localStorage.setItem（'state'，this.state）；
localStorage.setItem（'terms'，this.terms）；
此.$router.push（“详细信息”）
}
},
解散：职能（e）{
this.errors=[]；
}
}
}

您也可以通过商店经理（如

vuex

）或通过道具将值从主组件传递到其他组件来实现这一点。您可以在此处找到更多信息：