Vuebootstrap b-alert未显示axios调用响应变量的动态消息

Question

我使用vue bootstrap样式，我试图创建一个用户注册表单。当用户提交表单时，axios将向api发送post调用，如果调用成功，api将返回成功响应，如果有错误，api将返回错误消息。我试图捕捉响应，并在网页上提供警报。当前代码在前几次显示警报消息，然后在警报上不显示任何消息。我正在努力学习如何绑定数据值，谢谢。

<template>
<div>
<div  class="container1">
<b-card
text-variant="Dark"
header="Please Register"
header-text-variant="white"
class="shadow p-3 mb-5 bg-white rounded"
header-class="card-header"
>
<b-form @submit.prevent="onSubmit" v-if="show">
<b-form-group id="input-group-2" label="User Name" label-for="input-2"
style="text-align: left">
<b-form-input
id="input-3"
v-model="form.name"
placeholder="Enter User name"
required
ref="name"
></b-form-input>
</b-form-group>
<b-form-group
id="input-group-1"
label="Email address"
label-for="input-1"
style="text-align: left"
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
required
ref="email"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Password" label-for="input-2"
description="Password should be more than 8 characters."
style="text-align: left">
<b-form-input
id="input-2"
v-model="form.password"
placeholder="Enter Password"
required
ref="password"
type="password"
></b-form-input>
</b-form-group>
<b-button @click="showDismissibleAlert=true"
class="submit_button" type="submit">Submit</b-button>
</b-form>
</b-card>
</div>
<div>
<b-alert
v-model="showDismissibleAlert"
variant="danger"
dismissible
fade
:show="showDismissibleAlert"
@dismissed="showDismissibleAlert=false"
>
{{ showalert }}
</b-alert>
</div>
</div>
</template>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Poppins&display=swap');
.container1 {
justify-content: center;
display: flex;
margin-top: 10%;
font-family: 'Poppins', sans-serif;
}
.card-header {
background-color: #12858b;
}
.submit_button {
background-color: #12858b;
}
.form-control::placeholder {
opacity: 35%;
}
</style>
<script>
import axios from 'axios';
export default {
el: '#showalert',
name: 'LoginForm.vue',
data() {
return {
form: {
showalert: '',
name: '',
email: '',
password: '',
showDismissibleAlert: false,
},
show: true,
};
},
methods: {
async onSubmit(event) {
const path = 'http://127.0.0.1:5000/register';
axios.post(path, {
user_name: this.form.name,
email: this.form.email,
password: this.form.password,
})
.then(() => {
const result = 'Success!';
console.log(result);
})
.catch((error) => {
if (error.response) {
// alert(error.response.data);
this.showalert = error.response.data;
console.log(error.response.data);
}
});
event.preventDefault();
this.form.name = '';
this.form.email = '';
this.form.password = '';
this.show = false;
this.$nextTick(() => {
this.show = true;
});
},
},
};
</script>

Answer 1

由于字段数据是从表单生成的，所以在更新变量之后它就可以工作了。

<b-alert
v-model="showDismissibleAlert"
variant="danger"
dismissible
fade
@dismissed="showDismissibleAlert=false"
class="error-alert-message"
>
{{ form.showalert }}
</b-alert>

和

.catch((error) => {
if (error.response) {
this.showDismissibleAlert = true;
this.form.showalert = error.response.data;
this.form.image1 = false;
this.image2 = true;
console.log(error.response.data);

Answer 2

你的答案就在文档里。

使用v-model时不要使用show prop