after submit the form the vue reset all the data-CodePudding

export default {
  data() {
    return {
      usrName: null,
      pass1: null,
      pass2: null,
      regState: {stateCode:-1},
    }
  },
  methods: {
    register: function () {
        this.axios.post("/login/", { baseURL: 'http://127.0.0.1:3000', usrName: this.usrName, passWord: this.pass1 }).then((response)=>{
          console.log(response.data)
          this.$store.state.sysDecision.usrDecision = 2
        })
      }
    }
  }
}
</script>


<template>
  <XAIHeader :registerActive="true"></XAIHeader>
  <div >
    <form  style="padding-bottom: 400px;">
      <h5 >register</h5>
      <div>
        <label >user name</label>
        <input v-model="usrName" type="text"  required>
      </div>
      <div>
        <label >pass word </label>
        <input v-model="pass1" type="current-password"  required>
      </div>
      <div>
        <label >repeat pass word</label>
        <input v-model="pass2" type="new-password"  required>
      </div>
      <div >
        <button @click="register"  type="submit">register</button>
      </div>
    </form>
    {{ this.$store.state.sysDecision.usrDecision}}
  </div>
</template>

I try to send a post request with axios, the backend webserver respond json response correctly. But after receiving the data, but the data in vue reset to the initial value quickly and even the data in vuex is reset to the default initial value. How can I keep the previous data after post the form?

CodePudding user response：

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

CodePudding user response：

@submit.prevent="register"

try this maybe work.

<template>
  <XAIHeader :registerActive="true"></XAIHeader>
  <div >
    <form @submit.prevent="register"  style="padding-bottom: 400px;">
      <h5 >register</h5>
      <div>
        <label >user name</label>
        <input v-model="usrName" type="text"  required>
      </div>
      <div>
        <label >pass word </label>
        <input v-model="pass1" type="current-password"  required>
      </div>
      <div>
        <label >repeat pass word</label>
        <input v-model="pass2" type="new-password"  required>
      </div>
      <div >
        <button  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

CodePudding user response：

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