Vue Test
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container" id="login-box">
<div class="card ml-auto mr-auto col-9 mt-5">
<div class="card-body">
<h3>Вход в систему</h3>
<div class="form-group mt-4">
<input type="text" class="form-control" placeholder="Email" v-model="login">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Пароль" v-model="password">
</div>
<div class="mt-4 text-right">
<button-freeze class="btn-primary" v-on:click.native="doLogin" freeze="Пожалуйста подождите...">Войти</button-freeze>
</div>
</div>
</div>
</div>
Vue
Vue.config.devtools = true
Vue.component('button-freeze', {
data: function (){
return {
isFreeze: false
}
},
props: ['freeze'],
template: '<button class="btn" v-bind:disabled="this.isFreeze" v-on:click="this.Freeze"><slot v-if="!this.isFreeze"></slot><div v-else><i class="fa fa-spinner fa-pulse"></i>{{ freeze }}</div></button>',
methods: {
Freeze () {
this.isFreeze = true;
},
unFreeze () {
this.isFreeze = false;
}
},
computed: {
}
});
var vm = new Vue({
el: '#login-box',
data: {
login: '',
password: ''
},
methods: {
doLogin: function (event) {
var formData = new FormData();
formData.append('login', this.login);
formData.append('password', this.password);
axios.post('/login', formData)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.error(error);
})
.then(function () {
alert('always')
});
}
}
});