I am currently in the process of developing a Single Page Application using Vue.js. The structure involves having a template in App.vue which includes a navigation bar followed by a router-view component. When a user attempts to log in, a modal window appears and sends a login request to the API.
The main challenge I am facing is figuring out how to dynamically update the navigation bar after a successful login. Specifically, I want to hide the options for logging in and registering once a user has logged in. While I understand that I could use a conditional v-if="user" approach, I am unsure about how to pass this 'user' variable back from the modal component after a login attempt.
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/head_img.png">
<nav>
<ul>
<li><router-link to="/games">All games</router-link></li>
<li><router-link to="/">Home</router-link></li>
<li><modal-login>Login</modal-login></li>
<li><modal-register>Register</modal-register></li>
<li v-if="user">Logout</li>
</ul>
</nav>
<router-view></router-view>
</div>
</template>
<script>
import ModalLogin from './components/ModalLogin.vue'
import ModalRegister from './components/ModalRegister.vue'
export default {
name: 'app',
components: {
ModalLogin,
ModalRegister
}
}
</script>
Modal Example
<template>
<div>
<a href="/#register" @click.prevent="show">Register</a>
<modal name="modal-register" @opened="opened">
<form @submit.prevent="doRegister">
<div class="form-group">
<label for="email" class="block">Email</label>
<input v-model="email" type="email" id="email" name="email" class="border" ref="email">
</div>
<div class="form-group">
<label for="password" class="block">Password</label>
<input v-model="password" type="password" id="password" name="password" class="border">
</div>
<div class="form-group">
<button type="submit">Register</button>
</div>
</form>
<div class="form-group">
<p>Already have an account? <a href="#" @click.prevent="showLogin">Login</a></p>
</div>
</modal>
</div>
</template>
After sending the request, I have included a .then statement to verify the status of the request (201).
I would greatly appreciate any guidance or suggestions on how to effectively handle this particular task.