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 class="container">
<form 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 @click="register" class="btn btn-primary" type="submit">register</button>
</div>
</form>
{{ this.$store.state.sysDecision.usrDecision}}
</div>
</template>
我尝试用axios发送post请求,后端webserver正确响应json响应,但收到数据后,vue中的数据却迅速复位为初始值,甚至vuex中的数据也复位为默认初始值,如何在post表单后保留以前的数据呢?
3条答案
按热度按时间yxyvkwin1#
我用
<div></div>
替换了<form></form>
来解决这个问题。似乎如果使用<form></form>
标签,页面重载是不可避免的。xqnpmsa82#
@提交.防止=“注册”
试试这个可能有用。
在此引用https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
ttygqcqt3#
提交响应表单数据后,您需要使您的v-model数据为空,然后您的表单将被重置。
此.usrName =空