I have a main component that contains multiple sub-components, which I navigate between by clicking on different elements. These sub-components are all Vue files.
What I am trying to achieve is to dynamically highlight the active component when it is being used.
For example:
When I click on the Home button in the navigation bar, the component switches to the Home sub-component (which is already working), and I want to add a border around it to indicate it as the active tab.
To do this, I planned the following steps:
1) Get a collection of all the clickable elements
2) Filter out the element with a specific data attribute (which determines the active component)
3) Apply CSS styling to the active element
Here is the code snippet from the parent component (I've omitted some CSS for brevity):
<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"> <!-- Make some animation of this button becomes an extendable window of signing up. Don't forget -->
<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"
};
},
methods: {}
};
let nodeList = document.getElementsByTagName("a");
console.log(nodeList);
let active = Array.from(nodeList).filter(
element => element.className == this.data.current
);
console.log(active);
active.style.cssText = "border-bottom: 5px solid #5fb0e4;";
</script>
The issue I'm facing is that the array returns empty and the style isn't applying. Can anyone provide assistance on this problem?