Brijpal Sharma
vuejs
Publish on:-April 04th, 2020 ,
Category:- Web Development
Brijpal Sharma
vuejs
Publish on:-April 04th, 2020 ,
Category:- Web Development
So, To demonstrate this loader function. we will create a component for login or register and then send a request to the server. while sending a request to the server we will show a loader animation or image on the page of login. so let's start.
Here I create login component
Login.vue
<template>
<div >
<div v-if="loading">
<!-- here put a spinner or whatever you want to do when request is on proccess -->
<div ></div>
</div>
<div v-if="!loading" >
<div >
<div >
<div >Login vue</div>
<div >
<form>
<div >
<label for="email" >E-Mail Address</label>
<div >
<input id="email" type=email v-bind: v-model="email" required autofocus>
<small >{{ error }} </small>
</div>
</div>
<div >
<label for="password" >Password</label>
<div >
<input id="password" type=password v-model="password" required>
<router-link :to="{ name: 'email' }" >Forget Your Password ?</router-link>
</div>
</div>
<div >
<div >
<button type=submit @click="handleSubmit">
Login
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
After that add CSS code for Loader image.
<style type=text/css>
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 99;
background: url("//wpamelia.com/wp-content/uploads/2018/11/ezgif-2-6d0b072c3d3f.gif") center no-repeat #fff;
}
</style>
Add Vue Code
<script>
export default {
data(){
return {
email : "",
password : "",
error : "",
loading: false,
name: 'vue-title',
props: ['title'],
}
},
methods : {
handleSubmit(e) {
e.preventDefault()
if (this.password.length > 0){
this.loading = true ;
axios.post('api/login', {
email: this.email,
password: this.password
}).then((response) => {
let is_admin = response.data.user.is_admin
localStorage.setItem('user',JSON.stringify(response.data.user))
localStorage.setItem('jwt',response.data.token)
this.loading = false;
if (localStorage.getItem('jwt') != null){
this.$emit('loggedIn')
if(this.$route.params.nextUrl != null){
this.$router.push(this.$route.params.nextUrl)
}
else {
if(is_admin== 1){
this.$router.push('admin')
}
else {
this.$router.push('dashboard')
}
}
}
})
.catch(error => {
console.error(error);
this.loading = false
if (error.response.status == 401){
this.error = error.response.data.error
}
});
}
}
},
}
</script>
After add code successfully run your application
Don't forget to run this flowing command.
After that Received Response from backend this loader will we automatically hide. So here we will complete a blog post on How To Display A Loader While Sent Request Is In Progress In Vue.
Brijpal Sharma
Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...
You must be logged in to post a comment.