vuetify.js how to add type="submit" to Loaders Button - laravel

Question

i am new in Vuetify.js im trying to make submit Form using Loaders Button
i tryid but it not worked.
my tryid code
<v-btn
rounded
class="ma-2"
type="submit"
:loading="loading2"
:disabled="loading2"
color="primary"
#click="loader = 'loading2'"
>
Login
<template v-slot:loader>
<span>Loading...</span>
</template>
</v-btn>
my main code
<template>
<v-row justify="center">
<v-col cols="12" sm="6">
<form #submit.prevent="submit">
<v-card ref="form">
<v-card-text>
<h3 class="text-center">Login</h3>
<v-divider class="mt-3"></v-divider>
<v-col cols="12">
<v-img
:src="require('#/assets/1.png')"
class="my-3"
contain
height="80"
/>
</v-col>
<v-col cols="12" sm="12">
<v-text-field
v-model.trim="form.mobile_number"
type="number"
label="Mobile No"
solo
autocomplete="off"
></v-text-field>
<small class="form-text red--text" v-if="errors.mobile_number">{{
errors.mobile_number[0]
}}</small>
</v-col>
<v-col cols="12">
<v-text-field
v-model.trim="form.password"
type="password"
label="Password"
solo
autocomplete="off"
append-icon="mdi-eye"
></v-text-field>
<small class="form-text red--text" v-if="errors.password">{{
errors.password[0]
}}</small>
</v-col>
</v-card-text>
<v-divider class="mt-12"></v-divider>
<v-card-actions>
<div class="text-center">
<v-btn
rounded
color="primary"
dark
to="/AppMain/UserRegisterPage"
nuxt
>Register</v-btn
>
</div>
<v-spacer></v-spacer>
<div class="text-center">
<v-btn
rounded
class="ma-2"
type="submit"
:loading="loading2"
:disabled="loading2"
color="primary"
#click="loader = 'loading2'"
>
Login
<template v-slot:loader>
<span>Loading...</span>
</template>
</v-btn>
<!-- <v-btn rounded type="submit" color="primary" dark>Login</v-btn> -->
</div>
</v-card-actions>
</v-card>
</form>
</v-col>
</v-row>
</template>
<script>
export default {
middleware: ["guest"],
data() {
return {
loader: null,
loading: false,
loading2: false,
loading3: false,
loading4: false,
loading5: false,
form: {
mobile_number: "",
password: "",
},
};
},
watch: {
loader() {
const l = this.loader;
this[l] = !this[l];
setTimeout(() => (this[l] = false), 3000);
this.loader = null;
},
},
methods: {
async submit() {
await this.$auth.loginWith("local", {
data: this.form,
});
this.$router.push("/");
},
},
};
</script>
<style>
.custom-loader {
animation: loader 1s infinite;
display: flex;
}
#-moz-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#-webkit-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#-o-keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes loader {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
</style>

Answer 1

You create and use the variable "loading" but never set it.
For resolve your problem, please, add in your #click method something like
loading = true
....
and then make loading same to false, for stop the loading style of your button.
Good luck!