How to prevent grey background with Vuetify button that is using Vue router link?

user_931247 0
Viewed 120

When adding Vue-Router link like to="/" to my v-app-bar-nav-icon:

<v-app-bar fixed app>
  <v-app-bar-nav-icon v-else to="/">
    <v-icon>mdi-home-city</v-icon>
  </v-app-bar-nav-icon>
</v-app-bar>

The button gets a grey background (only) when I'm on the home page (/).

Is it a bug ? How to prevent this behavior?

vue-router material-design vuetify.js
2 Answers

It's rather unsusual to repurpose this element. Usually v-app-bar-nav-icon is there for toggling the navigation drawer visibility- it would be better to use some other element instead.

Your code, especially the v-else lets the icon dissapear. The to="/" part didn't change the icon color in my test.

user_16001930

I used Chrome's Inspect Element feature and under the Styles tab I found find this:

.theme--light.v-btn--active::before {
  opacity: 0.18;
}

So just override this class and change its opacity to 0 will work.

I think this is intended, but not my favorite... :/

user_133298600
Related