Hi i'm starting to use vue and javascript from some day and i need to do an example of form for my "exame". I would like to save locally the data entered by users and use this data and enter them on another page. Do I have to use a database? (user enter "name" and in the next page "welcome (name)"). This is part of my code:
<label>Nome:</label>
<input type="text" required v-model="nome">
<div class="submit">
<button>Iscriviti!</button>
export default {
data() {
return {
nome: '',
}
},
methods: {
inviaForm() {
console.log('form inviato')
}
}
Sorry for my english, i'm so bad
Page 1
<template>
<div>
<label>Nome:</label>
<input type="text" required v-model="nome">
<div class="submit">
<button @click="inviaForm">Iscriviti!</button>
</div>
</template>
<script>
export default {
data() {
return {
nome: '',
}
},
methods: {
inviaForm() {
localStorage.setItem('nome',this.nome)
}
}
</script>
Page 2
<template>
<div>
<div>Name is: {{nome}}</div>
</template>
<script>
export default {
data() {
return {
nome: '',
}
},
mounted() {
this.nome = localStorage.getItem('nome');
}
}
</script>
this may help -- just the snippet that would store the name. I reckon you're not into reactive / vuex states, so try this (and in your other component use onMount() { this.nome = localStorage.getItem('name') } to retrieve. You'll figure it out.
<form @submit="inviaForm">
<label>Nome:</label>
<input type="text" required v-model="nome">
<button>Iscriviti!</button>
</form>
export default {
data() {
return {
nome: '',
}
},
methods: {
inviaForm() {
localStorage.setItem('name', this.nome)
}
}
.