Just diving into Vue.js 2 and working on my very first (vue) web application. The setup includes two components - a header component and a login component. Once the login process is successful, a "loggedIn" flag gets toggled within an authentication service. This service then triggers an event to inform the header component (and potentially other listening components) that the user has logged in. Consequently, the header should update its display to show the username.
So far, all seems well with events being generated and transmitted using a global event bus. However, upon receiving the event in the header component, it fails to reflect the changes in the view.
I've experimented with various techniques such as basic subscriber patterns, Vuex, and now the event bus, but none seem to resolve the issue. Any insights into what might be causing this problem?
EventBus.js:
import Vue from 'vue'
var eventBus = new Vue()
export default eventBus
SessionService.js
import eventBus from '../util/EventBus'
class SessionService {
loggedIn=false
constructor () {
if (this.isValid(this.getSessionToken())) {
this.loggedIn = true
}
}
setSessionToken (token) {
localStorage.setItem('token', token)
if (this.isValid(token)) {
eventBus.$emit('LOGGEDIN')
} else {
eventBus.$emit('LOGGEDOUT')
}
}
getSessionToken () {
return localStorage.getItem('token')
}
isValid (token) {
return token !== undefined && token != null && token !== ''
}
}
var sessionService = new SessionService()
export default sessionService
Header.vue: Script
import eventBus from '../../services/util/EventBus'
var loggedIn = false
var m = this
eventBus.$on('LOGGEDIN', function () {
console.log('RECEIVED')
m.loggedIn = true
})
export default{
name: 'Header',
data () {
return {loggedIn}
}
}
Header.vue: HTML
<template>
<div>
<nav class="navbar navbar-expand-lg ap-top-nav">
<div class="container" >
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 my-lg-0 mr-auto">
<div class="ap-searcher">
<input class="ap-search" type="text" placeholder="Search" aria-label="Search"/>
<i class="fa fa-search"></i>
</div>
</form>
<div class="logo ml-auto mr-auto">
<img src="../../assets/images/logo.png"/>
</div>
<ul class="navbar-nav ml-auto">
<li class="nav-item ap-button blue wide">
<router-link to="/login">Login: {{loggedIn}}</router-link>
</li>
<li class="nav-item ap-button light-blue wide">
<router-link to="/registration">Register</router-link>
</li>
<li class="nav-item ap-button blue-border">
<a href="#">EN <i class="fa fa-sort-desc" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg ag-bottom-nav">
<div class="container">
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<router-link class="nav-link ap-link" to="/">Auctions</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lots</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Organize your own auction</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact </a>
</li>
</ul>
</div>
</div>
</nav>
<div class="ap-line">
</div>
</div>
</template>