[英]NuxtJS | Axios Register form reload page after submit
应该怎么操作? 当用户提交表单时,应出现通知并通知用户通过电子邮件激活帐户。
问题由于当用户提交表单页面立即刷新页面时,通知不会出现。
相同的代码,但在 Login.vue 中使用 nuxt auth 工作正常,并且不会刷新
代码
// Register.vue template
<form action @submit="register">
<label for="login">Nazwa Użytkownika:</label>
<input type="text" id="login" v-model="nickname" required />
<label for="password">Hasło:</label>
<input type="password" id="password" v-model="password" required />
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" required />
<div class="docs-box">
<label for="docs" class="toggleButton">
<span>Zgadzam się z regulaminem</span>
</label>
<input type="checkbox" id="docs" required />
</div>
<div class="action-button register">
<button type="submit" class="blue small">Utwórz Konto</button>
<span>
lub jeśli masz konto,
<nuxt-link to="/login">
<span class="bold">zaloguj się</span>
</nuxt-link>
</span>
</div>
</form>
// Register.vue script
methods: {
async register() {
try {
this.invalidSign = false;
await this.$axios
.$post("register", {
withCredentials: true,
headers: {
Accept: "application/json",
"Content-Type": "x-www-form-urlencoded"
},
nick: this.nickname,
pass: this.password,
email: this.email
})
.then(res => {
if (res.status == 0) {
this.invalidSign = "error";
} else if (
this.nickname == "" ||
this.password == "" ||
this.email == "" ||
checkbox.checked === false
) {
this.invalidSign = "error";
} else {
this.invalidSign = "success";
}
});
} catch (e) {
}
}
},
// Login.vue template
<form action @submit="login">
<label for="login">Nazwa Użytkownika:</label>
<input
required
type="text"
id="login"
v-model="nickname"
:class="{
'error-input': invalidSign == 'error',
'success-input': invalidSign == 'success'
}"
@click="invalidSign = false"
/>
<label for="password">Hasło:</label>
<input
required
type="password"
id="password"
v-model="password"
:class="{
'error-input': invalidSign == 'error',
'success-input': invalidSign == 'success'
}"
@click="invalidSign = false"
/>
<span class="error-text" v-if="invalidSign == 'error'">Błędny login lub hasło</span>
<div class="action-button">
<button type="submit" class="blue small">Zaloguj</button>
<span>
Jeśli zapomniałeś hasła,
<nuxt-link to="/remember">
<span class="bold">przypomnij</span>
</nuxt-link>
</span>
</div>
</form>
// Logiv.vue script
methods: {
async login(evt) {
const loginButton = document.getElementById("loginButton");
evt.preventDefault();
try {
await this.$auth.loginWith("local", {
data: {
nick: this.nickname,
pass: this.password
}
});
if (status == 0) {
this.invalidSign = "error";
} else {
this.invalidSign = "success";
}
} catch (e) {}
}
},
由于evt.preventDefault()
, evt.preventDefault()
的相同功能可以正常工作。 您应该在 register 函数中将事件作为参数传递并在其上调用preventDefault()
方法以防止表单的默认行为(即在提交时刷新页面):
methods: {
async register(evt) {
evt.preventDefault();
try {
this.invalidSign = false;
await this.$axios
.$post("register", {
withCredentials: true,
headers: {
Accept: "application/json",
"Content-Type": "x-www-form-urlencoded"
},
nick: this.nickname,
pass: this.password,
email: this.email
})
.then(res => {
if (res.status == 0) {
this.invalidSign = "error";
} else if (
this.nickname == "" ||
this.password == "" ||
this.email == "" ||
checkbox.checked === false
) {
this.invalidSign = "error";
} else {
this.invalidSign = "success";
}
});
} catch (e) {
}
}
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.