How to highlight only one menu item in vuetify?

Question

Vue.js

This is how I display the menu:

<v-navigation-drawer v-model="drawer" app>
      <v-list dense>
        <v-list-item v-for="(item, i) in menu" :key="i" :to="item.path">
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>
              <router-link :to="item.path">{{ item.title }}</router-link>
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>

The problem is that it always highlights as the active first link
. Here are the path values:

• /shasoft/core-ui/
  
• /shasoft/core-ui/message
  
• /shasoft/core-ui/test
  

This is how it is displayed (link /shasoft/core-ui/test is active)


I don’t understand what needs to be done so that only the actual current link is highlighted?

Answer 1

Try adding the exact attribute like this:

<v-list-item
    v-for="(item, i) in menu"
    :key="i"
    :to="item.path"
    exact
>