v-model not doing anything on sidebar

[ashleymoogle]

OS: MacOs Node : 10.15.1 Vuesax: 3.8.24 Browser: Chrome 72.0.3626.121 (Official Build) (64-bit) Package manager: Yarn

Hello! I'm having trouble with the active class feature of the slidebar coupled with the vue-router. The v-model doesn't seem to do anything and as far as I know there is no way to set the correct active state on page load. Any ideas?

[jsinhSolanki]

Hi, active prop is just there to hide and show sidebar. It has nothing to do with active item in sidebar. For vue-router and sidebar's active item, You can try changing class of vue-router using linkActiveClass: 'active', instead of active there will be vuesax active link class when clicked.

Let me know if it works.. ~ Cheers

[Alcadramin]

Since documentation is very limited, I think I'm gonna bump this for anyone can't figure it out . You can do something like this;

<template>
  <vs-sidebar v-model="active"> <!-- This model is for hide/show sidebar -->
    <vs-sidebar-item to="/" :class="{ active: isActive('home'), link: true }">
      Home
    </vs-sidebar-item>
    <vs-sidebar-item to="/about" :class="{ active: isActive('about'), link: true }">
      About
    </vs-sidebar-item>
  </vs-sidebar>
</template>

<script>
export default {
  data: () => {
    return {
      active: "",
    }
  },
  methods: {
    isActive(route) {
      return this.$route.name && route === this.$route.name.toLowerCase();
    }
  }
}
</script>

It should add .active class to vs-sidebar-item. Means you will see active route in your sidebar.