X
X
xcuube2019-08-06 18:12:06
Vue.js
xcuube, 2019-08-06 18:12:06

Why doesn't VUE update the HTML and data in data?

Hello! There is such a page block authorization

<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>

And such vue instance
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;
                    }
                })
            }
        }
    })

The server receives the login and password, checks and returns arrays:
If authorization was successful: And if not successful
['result' => true]
['result' => false, 'text' => "Не найдена связка логин/пароль"]

The problem is that when assigning the server response here:
this.whatAboutLogin = response.data.text;
VUE does not update the html. In the devtool, it is also not visible that the whatAboutLogin variable has changed, although if after assignment it is written like this: then the variable from vue is displayed in alert. Because of what it can be? I don't want to display all server responses in alerts :(
alert(this.whatAboutLogin)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question