What is the easiest way of changing the values of an array javascript

Question

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 class="mt-5 flex-1" aria-label="Sidebar">
                <div class="space-y-1 px-2">
                    <router-link v-for="item in navigation" :key="item.name" :to="item.to" @click="setCurrent(true)" :class="[item.current ? 'bg-gray-100 text-gray-900' : 'text-black hover:bg-gray-50 hover:text-gray-900', 'group flex items-center px-2 py-2 text-base font-medium rounded-md']">
                        <component :is="item.icon" :class="[item.current ? 'text-black' : 'text-black group-hover:text-gray-500', 'mr-4 h-6 w-6 router-link']" aria-hidden="true" />
                        {{ item.name }} 
                        <LockClosedIcon v-if="item.locked" :class="['ml-16 items-end rounded-full bg-pink-100 px-0.9 py-0.5  text-pink-800 w-6 h-6']"/>

                      </router-link>
                </div>
              </nav>

Answer 1

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)
},