Hello I'm working on a navigation bar,
I keep the all the data in an array, when a user clicks on the link I would like to adjust the data in the array to make that link current.
This is what I have so far but I cant think of a way to make it work...
export default{
data()
{
return {
sidebarOpen: false,
displayUserName: store.user.username,
navigation : [
{ name: 'Dashboard', to: '/dash/Home', requiresSecondaryBar: true,icon: HomeIcon, current: true, locked: false },
{ name: 'My courses', to: '/dash/MyCourses', requiresSecondaryBar: true,icon: CalendarIcon, current: false, locked: !store.details.hasCourse },
{ name: 'Courses', to: '/dash/Courses', requiresSecondaryBar: false,icon: UserGroupIcon, current: false, locked: false},
{ name: 'Messages', to: '/dash/Messages', requiresSecondaryBar: true,icon: MagnifyingGlassCircleIcon, current: false, locked: false },
{ name: 'Community', to: '/dash/Community', requiresSecondaryBar: true,icon: MegaphoneIcon, current: false, locked: false},
{ name: 'Resources', to: '/dash/Resources', requiresSecondaryBar: true,icon: MapIcon, current: false, locked: false },
{ name: 'Flip', to: '/dash/Flip', requiresSecondaryBar: false,icon: MapIcon, current: false, locked:false },
]
}
},
methods: {
setCurrent(current)
{
console.log(this.navigation)
let navigation = this.navigation
navigation = navigation.map((names) => {
return {
name: names.name,
to: `/dash/${names.name}`,
requiresSecondaryBar: names.requiresSecondaryBar,
icon: names.icon,
current: this.checkCurrent(current),
locked: names.locked
}
})
console.log(navigation)
},
checkCurrent(current)
{
if(current = this.navigation.name)
{
return true
}
else{
return false
}
}
}
}
<nav aria-label="Sidebar">
<div >
<router-link v-for="item in navigation" :key="item.name" :to="item.to" @click="setCurrent(true)" :>
<component :is="item.icon" : aria-hidden="true" />
{{ item.name }}
<LockClosedIcon v-if="item.locked" :/>
</router-link>
</div>
</nav>
CodePudding user response:
Let me see if I understand you, try this in your template @click you must pass the v-for item.
@click="setCurrent(item)"
And in yout set current function, you will loop your navigation array and check if that item is the same
setCurrent(nav_item)
{
console.log(this.navigation)
let navigation = this.navigation
navigation = navigation.map((names) => {
return {
name: names.name,
to: `/dash/${names.name}`,
requiresSecondaryBar: names.requiresSecondaryBar,
icon: names.icon,
current: names.name == nav_item.name
locked: names.locked
}
})
console.log(navigation)
},