I am in the process of designing a navigation bar. I have created an array to store the information of the tabs present in the nav bar.
tabs: [
{ name: 'All',id: "dash.courses.all", to: 'all', current: false },
{ name: 'Self-paced Learning',id: "dash.courses.oneToOneClasses", to: 'selfPacedLearningComp', current: false },
{ name: '30 Days Challenge',id: "dash.courses.selfPacedLearningComp", to: 'thirtyDaysChallenge', current: false },
{ name: 'Group Classes',id: "dash.courses.groupClasses", to: 'groupClasses', current: false },
{ name: '1-to-1 Classes',to: "dash.courses.thirtyDaysChallenge", to: 'oneToOneClasses', current: false },
]
Whenever a new route is clicked, it updates the newly clicked tab by setting the current property to true.
How can I change the previous nav item to false? Currently, they all change to true one by one as they are clicked.
I believe if I store a value as previous
setCurrent(tab)
{
let newArr = this.tabs.map(obj => {
if (obj.id === tab) {
return {...obj, current: true};
}
return obj;
})
this.tabs = newArr
console.log(newArr)
}
},
This is what i've got so far, it has to go around 3 routes ahead till the one before vanishes...
<script>
export default {
components: {
},
data()
{
return {
prevTab: null,
tabs: [
{ name: 'All',id: "dash.courses.all", to: 'all', current: false },
{ name: 'Self-paced Learning',id: "dash.courses.oneToOneClasses", to: 'selfPacedLearningComp', current: false },
{ name: '30 Days Challenge',id: "dash.courses.selfPacedLearningComp", to: 'thirtyDaysChallenge', current: false },
{ name: 'Group Classes',id: "dash.courses.groupClasses", to: 'groupClasses', current: false },
{ name: '1-to-1 Classes',to: "dash.courses.thirtyDaysChallenge", to: 'oneToOneClasses', current: false },
]
}
},
methods: {
setCurrent(tab)
{
this.prevTab = this.$route.name
let newArr = this.tabs.map(obj => {
if (obj.id === tab) {
return {...obj, current: true};
}
if(obj.id === this.prevTab) {
return {...obj, current: false}
}
return obj;
})
console.log('previous ',this.prevTab)
console.log('route name', this.$route.name)
this.tabs = newArr
}
},
mounted()
{
this.prevTab = this.$route.name
const newArr = this.tabs.map(obj => {
if (obj.id === this.$route.name) {
return {...obj, current: true};
}
return obj;
});
this.tabs = newArr
}
}