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

Question

[adam_carraway]

Я использую vue-router(только начал изучать, разбираюсь что к чему).

<div id="app">
    <header_v :authdata="{{ json_encode($url_data) }}"></header_v>
    <router-view></router-view>
</div>

В компоненте header_v у меня есть переменная login (авторизован пользователь или нет).
router-view - здесь выводятся страницы сайта в зависимости от роута. Так вот как сделать чтобы когда в компоненте header_v менялось значение login то компонет router-view перерисовывался (обновлялся)?
Или как такое вообще реализовывается ?
header_v

import axios from 'axios';
    export default {

        props: [
            'authdata'
        ],
        data: function () {
            return {
                login: this.authdata,
                email: '',
                password: ''
            }
        },
        mounted() {
        },
        watch: {},
        methods: {
            exit: function () {
                let t = this;

                axios.post('/api/exit', {
                    _token: $('meta[name="csrf-token"]').attr('content')
                }).then(response => {
                    t.login = null;
                    window.location = '/';
                })
            },
            loginB: function () {
                let t = this;
                axios.post('/api/login', {
                    email: this.email,
                    password: this.password,
                }).then(response => {
                    t.login = response.data;
                    $("#authmodal").modal('hide');
                    t.$router.go();
                })

            },
        }
    }

Comments

[alex]

ну может код компонента кинете?

[adam_carraway]

Alex, обновил вопрос

[alex]

adam_carraway, и что тут должно перерисовываться?

[adam_carraway]

Alex, когда срабатывает метод exit должен перерисоваться "router-view"

[alex]

adam_carraway, ЧТО должно перерисовываться?

[adam_carraway]

Alex, router-view

[alex]

adam_carraway, чтобы router-view перерисовался, нужно изменить роут. поэтому вручную кидайте юзера на нужный роут.

exit() {
   axios.post('/api/exit', {
     _token: $('meta[name="csrf-token"]').attr('content')
   })
     .then(response => {
       this.login = null;
       this.$router.replace('/')
     })
 }

[alex]

adam_carraway, либо через watch можно

watch: {
  'login': {
    handler(val) {
      if (!val) {
        this.$router.replace('/')
      }
    },
    immediate: true
  }
}

[adam_carraway]

Alex, ну в общем я так и делал, думал можно как-то перерисовывать без обновления страницы. спасибо

[alex]

adam_carraway, this.$router.replace('/') не обновляет страницу

Answer 1

[WebDev]

Что значит перерисовывался? Вы внутри ставьте условия для авторизованного и неавторизованного пользователя и они сами будут работать. Например:

<header>
    <div v-if="user">Здравствуйте, {{ user.name }}</div>
    <button v-else>Войти</button>
</header>

user - это для примера, вы сюда можете что угодно подставить, в зависимости от того, как вы отличаете авторизованного пользователя от неавторизованного