Как перерисовать компонент vue?

Question

[adam_carraway]

У меня есть компонент Header.vue в котором находится шапка сайта.

<div class="main_menu__auth l-ml-10 lm-ml-10" ref="map">
                    <div v-if="authdata == null" class="main_menu__auth__login l-fs-15 main_menu__auth__login--shown">
                        <i class="far fa-user-circle  l-fs-20 icon icon--signin"></i>
                        <span class="l-ml-10 lm-hidden">Войти</span>
                    </div>
                    <div v-else>
                        {{authdata.name}} |
                        <button @click="exit">Выход</button>
                    </div>
                </div>

В эту шапку(компонент) передается authdata (если массив authdata пуст значит пользователь не авторизован), а если не пуст то авторизован. Допустим я авторизовался и обновил страницу, в шапке мне покажется логин и кнопка выхода, если нажать на кнопку выход то отправится запрос на logout (пользователь станет не авторизованным) после этого запроса я обнуляю authdata . Вопрос в следующем как мне перерисовать (обновить) dom чтобы вместо логина и кнопки выхода появилась кнопка входа?

export default {
        data:function(){
            return{
            }
        },
        props:[
            'authdata'
        ],

        mounted(){
          this.update()
        },
        watch:{

        },
        methods:{
            update: function () {
                console.log(this.authdata)
            },
            exit:function () {

                $.ajax({
                    url: "/exit",
                    type: "GET",
                    data: "get=on",
                    success: function (response) {
                        console.log('Нажал на выход'+response);
                        this.authdata = null;
                        console.log(this.authdata);
                    }
                });
            }
        }
    }

только начал изучать vue.

Answer 1

[coderisimo]

вроде все правильно делаете, но :

exit:function () {
let t = this; // вам нужно передать внутрь правильный контекст
         $.ajax({
              url: "/exit",
              type: "GET",
              data: "get=on",
              success: function (response) {
                        console.log('Нажал на выход'+response);
                        t.authdata = null; //  внимание! this здесь уже не тот! :)
                        console.log( t.authdata);
                    }
                });
            }

Answer 2

[Dmitry Barkowski]

Для принудительного обновления компонента проще всего использовать токены. К примеру.
В data создадим поле refreshToken со значением 1.
Добавим метод refreshComponent, который производит инкремент переменной refreshToken.
И к нужному элементу добавим значение v-bind:refresh-token = "refreshToken".
Теперь, когда нужно перерисовать компонент, просто вызываем метод refreshComponent.
Но все же, лучше подход будет использовать хранилище состояния vuex, он реактивен. Просто создай логику с v-if / v-else и оно будет работать как нужно.

Answer 3

[Дима Паутов]

Входящие свойства нельзя обнулить из компонента. У вас должна быть ошибка в консоли, что так делать нельзя.

Для таких вещей используйте vuex, что бы вынести данные глобально.

Comments

[adam_carraway]

После обнуления я вывожу console.log(this.authdata) и выводится null, никаких ошибок

[Дима Паутов]

вы в шаблоне выведите {{ authdata }} и увидим