Здравствуйте! Есть такой блок страницы авторизация
<div id="app">
<div class="form-signin">
<h1 class="h3 mb-3 font-weight-normal">Авторизация</h1>
<label for="inputEmail" class="sr-only">Email</label>
<input v-model="email" type="email" id="inputEmail" class="form-control" placeholder="Email" required="" autofocus="">
<label for="inputPassword" class="sr-only">Пароль</label>
<input v-model="password" type="password" id="inputPassword" class="form-control" placeholder="Пароль" required="">
<div v-if="whatAboutLogin" class="alert alert-danger" role="alert">{{whatAboutLogin}}</div>
<button class="btn btn-lg btn-primary btn-block" @click="foo">Войти</button>
<p class="mt-5 mb-3 text-muted"><a href="https://orderstack.ru/">orderstack.ru</a></p>
</div>
</div>
И такой экземпляр vue
var app = new Vue({
el: '#app',
data: {
whatAboutLogin: null,
email: null,
password: null
},
methods: {
foo: function() {
axios.post('api/user/login', {
email: this.email,
password: this.password
}).then(function (response){
if (response.data.result) {
window.location.href = "dashboard.php"
}
else{
alert(response.data.text);
this.whatAboutLogin = response.data.text;
}
})
}
}
})
Сервер получает логин и пароль, сверяет и возвращает массивы:
Если авторизация прошла успешно:
['result' => true]
И если не успешно
['result' => false, 'text' => "Не найдена связка логин/пароль"]
Проблема в том, что при присваивании ответа сервера вот тут:
this.whatAboutLogin = response.data.text;
VUE не обновляет html. В девтуле тоже не видно, что изменилась переменная whatAboutLogin, хотя если после присваивания прописать вот так:
alert(this.whatAboutLogin)
то в alert переменная из vue выводится.
Из-за чего это может быть? Не хочется выводить все ответы сервера в alert'ах :(