[Vuejs]-After submit the form the vue reset all the data

by

0👍

I solve this problem by replacing the <form></form> with <div></div>. It seems if use <form></form> tag, the page reloading is inevitable.

0👍

@submit.prevent="register"

try this maybe work.

<template>
  <XAIHeader :registerActive="true"></XAIHeader>
  <div class="container">
    <form @submit.prevent="register" class="w-50 mx-auto pt-5" style="padding-bottom: 400px;">
      <h5 class="mb-3">register</h5>
      <div>
        <label class="form-label">user name</label>
        <input v-model="usrName" type="text" class="form-control" required>
      </div>
      <div>
        <label class="form-label">pass word </label>
        <input v-model="pass1" type="current-password" class="form-control" required>
      </div>
      <div>
        <label class="form-label">repeat pass word</label>
        <input v-model="pass2" type="new-password" class="form-control" required>
      </div>
      <div class="mt-3">
        <button class="btn btn-primary" type="submit">register</button>
      </div>
    </form>
    {{ this.$store.state.sysDecision.usrDecision}}
  </div>
</template>

reference here
https://vuejs.org/guide/essentials/event-handling.html#event-modifiers

-1👍

After submit response the form data you need to make your v-model data to null, then your form will be reset.

this.usrName = null

Leave a comment