A
A
adam_carraway2019-07-01 11:52:03
Vue.js
adam_carraway, 2019-07-01 11:52:03

How to redraw one component?

I use vue-router (I just started learning, I understand what's what).

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

In the header_v component, I have a login variable (whether the user is logged in or not).
router-view - site pages are displayed here depending on the route. So how to make it so that when the value of login changes in the header_v component, then the router-view component is redrawn (updated)?
Or how is this even implemented?
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();
                })

            },
        }
    }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
W
WebDev, 2019-07-01
@kirill-93

What does redraw mean? You set the conditions for an authorized and unauthorized user inside and they will work themselves. For example:

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

user - this is an example, you can substitute anything here, depending on how you distinguish an authorized user from an unauthorized one

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question