0

By default, Vuetify's v-btn has a "selected state", which from what I can tell, is just a darkened background. I'm using a few v-btns in a v-app-bar. One of these buttons is a Home button. When the vue app is launched (i.e. main route), I want to set the Home button as selected so that the user knows that this is the home page. Is there a simple way that I can do this from the template that I have my v-app-bar in?

<template>
  <v-app-bar app fixed>
    <router-link to="/">
      <v-img src="/assets/my-logo.png" to="/home" class="mx-2" max-height="128" max-width="128" contain/>
    </router-link>
    <v-btn to="/home" tile>Home</v-btn>
    <v-btn to="/another-view" tile>Another View</v-btn>
    <v-btn to="/yet-another-view" tile>Yet Another View</v-btn>
  </v-app-bar>
</template>

So given the markup above, how can I set the Home button as "active" or "selected" when the page opens up at the default route?

In the v-btn documentation, there's a prop called "input-value" which says that it controls the button's active state. The problem is that its type is "Any", so I'm not sure how to use it (and the documentation doesn't show anything about it). I tried setting to true/false and nothing changes.

Also, if I want to just get rid of all the buttons active states, how do I do that?

Why isn't there a simple solution like focused="true|false"?

u84six
  • 4,604
  • 6
  • 38
  • 65
  • you can use `exact-active-class` prop to set css class on active route/button – Ja9ad335h Oct 01 '19 at 20:59
  • @Ja9ad335h can you show an example? I'm new to vue and vuetify. I'm also thinking that I'd be better off without an active state in a nav bar, so maybe show how to disable it all together. Also, I'm using v-btn with the "to" attribute. I'm not using the router-link. – u84six Oct 01 '19 at 21:16
  • @Ja9ad335h never mind, I was able to just remove the active state by creating a class .navBtn:focus::before ( opacity: 0 !important; }. This seems a but kludgy but at least it works. – u84six Oct 01 '19 at 21:31
  • @Ja9ad335h I spoke too soon. ;) Too many side-effects going with my solution above. Now when I lose focus of the button, it gets highlighted! Doh! How can I just turn all of this off? All I want is maybe a click action, otherwise, I want no highlighting on focus, off focus, etc. – u84six Oct 01 '19 at 21:36

0 Answers0