I have utilized Vue Bootstrap for styling, and I am in the process of creating a user registration form. Upon submission of the form by the user, Axios will make a POST request to the API. If the call is successful, the API will return a success response; otherwise, an error message will be included in the response. My goal is to capture this response and display an alert on the webpage. The current issue I am facing is that the alert message appears for the first couple of submissions but then stops showing up. I am eager to learn how to bind data in Vue effectively. Thank you.
<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>