I currently have my project structured in the following way:
- Views
- Home.vue
- Classroom.vue
- App.vue
Within the Home.vue file, I display the content and a login form. Essentially, users must submit their login information, and if correct, the isAuth variable is set to true. Subsequently, the form is hidden, revealing the content (a list of classrooms).
<div v-if="isAuth" @click="goToClassroomView"> List of classrooms </div>
<div v-if="!isAuth"&glt; Here is the login form... </div>
Within the App.vue file, I have an app-bar and main section with a router-view containing a logout function.
<v-app-bar app color="#2196f3">
<v-btn @click="logout()">logout</logout>
</v-app-bar>
<v-main class="white">
<router-view></router-view> //Either Home.vue or Classroom.vue
</v-main>
Here is the logout function defined inside the App.vue:
logout() {
this.$store.dispatch('LOGOUT')
.then(() => {
this.$router.push('/') //navigate to home.vue
})
}
My current issue arises when I logout while on the home page. The user successfully logs out, but the page remains empty as the list of classrooms is tied to the isAuth variable located in Home.vue, making it inaccessible from App.vue.
Is there a way to either reload the page while on the Home page or access the isAuth variable from App.vue so that upon logging out from the home page, the list of classrooms disappears, and the login form reappears?