My app features a bottom navigation bar with 4 icons that, when clicked, change the displayed view. I want the selected icon to switch from white to red. To achieve this, I thought of toggling the class of .active when an icon is selected. However, my current code toggles the class of all list items instead of just the selected one. Additionally, I need the first list item to be set as active by default. Is there a way to accomplish this?
The structure of my navigation component is as follows;
<li v-on:click="active = !active" v-bind:class="{active: active}">
<router-link to="/pageOne">
<i>Icon 1</i>
</router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
<router-link to="/pageTwo">
<i>Icon 2</i>
</router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
<router-link to="/pageThree">
<i>Icon 3</i>
</router-link>
</li>
<li v-on:click="active = !active" v-bind:class="{active: active}">
<router-link to="/pageFour">
<i>Icon 4</i>
</router-link>
</li>
Below this structure, is the accompanying script;
<script>
export default {
name: "PrimaryAppNav",
data() {
return {
active: false
};
}
};
</script>