Как обновить v-if с данными?

Я создаю простое приложение с vueJS, но у меня проблемы с реактивностью.

Когда пользователь подключается к приложению, он получает JWT, я сохраняю этот JWT в своем локальном хранилище. И для проверки того, зарегистрирован ли пользователь, я просто проверяю наличие токена.

Прежде всего, это хороший метод?

Теперь я пытаюсь обновить панель навигации, когда пользователь не вошел в систему, у меня есть 2 кнопки «зарегистрироваться», «войти», когда он вошел в систему, я хочу, чтобы моя кнопка «отключить» появлялась, а две другие исчезают.

У меня есть компонент навигационной панели с "v-if" внутри для отображения или отсутствия кнопок.

В настоящее время я установил логическое значение «isLogged» в своих данных(). Как заставить vueJS отслеживать эти данные и обновлять мой компонент при обновлении этих данных?

    <div class="navbar-item" v-if="!isLogged">
        <div class="buttons">
            <a @click="$router.push('/login')" class="button nav-button is-outlined">
                CONNEXION
            </a>
            <a @click="$router.push('/register')" class="button nav-button is-outlined">
                INSCRIPTION
            </a>
        </div>
    </div>
    <a @click="disconnect" class="navbar-item" v-if="isLogged">
        Déconnexion
    </a>

    data() {
        return {
            isLogged: this.$jwt.hasToken()
        }
    }

Я бы хотел, чтобы моя панель навигации обновлялась без обновления компонента.


javascript vuejs2 navbar vue-reactivity
person Umbreoon    schedule 09.04.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Используйте вычисляемое значение вместо данных.

computed: {
    isLogged() {
        return this.$jwt.hasToken()
    }
}
person Richard Ayotte    schedule 09.04.2019
comment
Спасибо, но где я должен назвать это вычисленное значение? - person Umbreoon; 09.04.2019
comment
Нет необходимости вызывать вычисляемое значение, оно выполняется автоматически. Рассматривайте isLogged как переменную в вашем шаблоне, как вы делаете сейчас. - person Richard Ayotte; 09.04.2019
comment
Я только что попробовал, и моя панель навигации по-прежнему не обновляется, за исключением случаев, когда я обновляю страницу:/Вычисленное значение не обновляется в режиме реального времени. - person Umbreoon; 09.04.2019
comment
Тогда this.$jwt.hasToken() тоже не обновляется. Мне нужно больше контекста, чтобы увидеть, как управляется состояние this.$jwt. Укажите jsfiddle.net или codepen.io и я помогу вам это исправить. - person Richard Ayotte; 09.04.2019
comment
Если это не сработает, то я думаю, что есть другой способ (не чистый), создайте переменную loggedIn и обновляйте ее каждый раз, когда токен jwt установлен или получен или истек. Если срок действия вашего токена jwt установлен, вы можете использовать setTimeout(), чтобы установить loggedIn в false после определенной продолжительности - person Ashish Doneriya; 10.04.2019