Задать вопрос
@xcuube

Почему VUE не обновляет HTML и данные в data?

Здравствуйте! Есть такой блок страницы авторизация

<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'ах :(
  • Вопрос задан
  • 263 просмотра
Подписаться 1 Средний 2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы