[Vuejs]-Using Vuesax Sidebar component with a spa and am looking to auto detect page and set active property

by

0👍

I fixed this by adding some custom logic to the afterEach function within the Vue Router.

router.afterEach((to,from) => {

  // Clear all buttons
  const btns = document.querySelectorAll('.vs-sidebar-item-active');
  btns.forEach( el => {
    el.classList.remove('vs-sidebar-item-active')
  });

  // Highlight correct button
  var item = document.querySelector("div.page-" + to.name);
  if (item) {
    item.classList.add('vs-sidebar-item-active');
  }
});

You need to add the appropriate class names to the vs-sidebar-items. Here I’ve got classes of page-*** to match the name of the route.

Leave a comment