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>
当用户返回/
路由时如何显示数据?
解决方案
使用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>
推荐阅读
- linux - 对 64 位寄存器感到困惑 - ASM
- java - 从另一个调用构造函数 - this 关键字用法
- php - 如何在 PHP 中将下个月按钮添加到我的日历中?
- regex - Elixir:如何计算字符串中的 url
- c++ - 在 QT 信号中使用常量指针的正确方法
- xml - XSLT 键语句返回一个组,我无法分隔结果
- c# - .NET Framework 图形的支持已移至 .NET Core,但如何继续绘制图像?
- asp.net-core-2.1 - .net Core 中的RequiredIf 条件属性
- c# - AJAX 调用是否会在 Razor Pages 中重新加载我的整个页面?
- python - 从子目录导入模块 - python