0

Tenho este código de um simples formulário usando o Vue.js, preciso salvar no localStorage. Já tentei de tudo, sempre dá erro, poderiam me sugerir uma idéia para tentar armazenar? Desde já agradeço.

<template>

  <form>
   <h3>Cadastro de usuários</h3>

   <div id="app">
  <input type="text"  placeholder="Nome" v-model="name"/>
  </div>

   <div>
  <input type="text"  placeholder="Usuário" v-model="user"/>
  </div>

  <div>
  <input type="password"  placeholder="Senha" v-model="password"/>
  </div>

  <input type="password"  placeholder="Confirmar Senha" v-model="confirmPassword" />

  <div>
  <input type="submit" id="salvar" value="Cadastrar" />
  </div>
   
 </form>

</template>
<script></script>
4
  • Onde está o código que "tenta" salvar no localStorage?
    – Danizavtz
    Commented 30/09/2021 às 11:19
  • no scritp, tento somente esta opção e já ocorre erro: var vm = new Vue({ (aqui vem suas opções) }) Commented 30/09/2021 às 11:21
  • const app = new Vue ({ el: 'app', data: { name: '' } }) com este inicio já ocorre erro: 'Vue' is not defined Commented 30/09/2021 às 11:23
  • Você pode editar a pergunta para incluir as informações do comentário. Basta clicar em editar.
    – Danizavtz
    Commented 30/09/2021 às 11:23

2 Respostas 2

0

Acho que um código assim deve funcionar para o seu problema (mesmo não tento muitos detalhes de como você tentou salvar no localStorage)

<template>
  <div>
      <form @submit.prevent="submit()">
          <h3>Cadastro de usuários</h3>

          <div id="app">
          <input type="text"  placeholder="Nome" v-model="name"/>
          </div>

          <div>
          <input type="text"  placeholder="Usuário" v-model="user"/>
          </div>

          <div>
          <input type="password"  placeholder="Senha" v-model="password"/>
          </div>

          <input type="password"  placeholder="Confirmar Senha" v-model="confirmPassword" />

          <div>
          <input type="submit" id="salvar" value="Cadastrar" />
          </div>
          
        </form>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      name: "",
      user: "",
      password: "",
      confirmPassword: ""
    }
  },
  methods: {
    submit() {
      const userObject = {
        name: this.name,
        user: this.user,
        password: this.password,
        confirmPassword: this.confirmPassword
      }

      localStorage.setItem("userObject", JSON.stringify(userObject))
    }
  },
  mounted() {
    const savedUser = localStorage.getItem("userObject")

    if(savedUser) {
      console.log("usuario do localStorage")
      console.log(JSON.parse(savedUser))
    } 
    else {
      console.log("usuario não existe no localStorage")
    }
  }
};
</script>

No método submit() eu só pego os dados do form e salvo no localStorage no formato JSON (acredito ser o melhor jeito para salvar essas informalções)

Além disso, implementei o método mounted() para mostrar no console quando tem o usuário salvo no localStorage (basta atualizar a página depois de salvar um usuário). Vale lembrar que como eu salvei em JSON eu preciso fazer o parse para poder usar o objeto no código

-3

Para acessar o localStorage utilize:

window.localStorage.getItem(blablabla...)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .