In my Vue parent component, I have multiple child components.
There are several elements that toggle between components by updating the current data.
The issue is that I am unsure how to indicate which tab is currently active.
I've tried various lifecycle hooks like updated, beforeupdated, mounted, created, and beforecreated, but none of them seem to work.
Currently, the code only applies styling to the initial tab (which is "Home"). I want it to highlight only the active tab without affecting others, but unfortunately, it doesn't work as intended.
Most of the time, it either styles all visited links, doesn't work at all, or only works for the initially active tab.
Here is a snippet of the important code from the parent component:
<template>
<div id="grid">
<nav id="navbar">
<ul id="nav">
<a href="#" class="Home" @click="current = 'Home'" ><li>{{navbar.Home}}</li></a>
<a href="#" class="Reservation" @click="current = 'Reservation'" ><li>{{navbar.Reservation}}</li></a>
<a href="#" class="About-us" @click="current = 'About-us'" ><li>{{navbar.About}}</li></a>
<a href="#" class="Contact" @click="current = 'Contact'" ><li>{{navbar.Contact}}</li></a>
</ul>
<div class="button">
<a href="#">Sign Up
</a>
</div>
<img src="https://i.pinimg.com/564x/8b/fa/5d/8bfa5d6a52a03e83b995fec69a4d8c2c.jpg" alt="" id="logo">
</nav>
<main id="content">
<keep-alive>
<transition name="component-fade" mode="out-in">
<component v-bind:is="current"></component>
</transition>
</keep-alive>
</main>
<footer>
<p>Copyright © All Rights Reserved</p>
</footer>
</div>
</template>
<script>
import Home from "./components/Home.vue";
import Aboutus from "./components/About us.vue";
import Contact from "./components/Contact.vue";
import Reservation from "./components/Reservation.vue";
import Signup from "./components/Signup.vue";
export default {
components: {
Home: Home,
"About-us": Aboutus,
Contact: Contact,
Reservation: Reservation,
Signup: Signup
},
data() {
return {
navbar: {
Home: "Home",
Reservation: "Reservation",
About: "About us",
Contact: "Contact"
},
current: "Home"
};
},
mounted: function() {
let activeTab = document.querySelector("." + this.current);
activeTab.className = "active";
},
beforeUpdate: function() {
let previousTab = document.querySelector("." + this.current);
previousTab.className = "none";
},
methods: {}
};
</script>