鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

vuetify.jsツールバーで選択したボタンの状態をトグル状態にしたくない場合

vueのルーターを使って,vuetify.jsでツールバーを作成。
ロゴ部分はイメージを使ったボタンにしました。
ロゴを選択した場合はボタンをトグル状態にしたくない。以下だとカッコ悪い。

f:id:kechiya:20180321155306p:plain

そんな場合には,active-classを無指定にすればいいとのことです。

Buttons change color when used as vue-router link (.btn--active) · Issue #1947 · vuetifyjs/vuetify · GitHub

    <v-toolbar app>
      <v-toolbar-title class="mr-5">
        <v-btn flat to="/" active-class><img src="./assets/logo.png"/></v-btn>
      </v-toolbar-title>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn flat to="/shop">{{ $t("shop") }}</v-btn>
        <v-btn flat to="/discount">{{ $t("discount") }}</v-btn>
        <v-btn flat to="/item">{{ $t("item") }}</v-btn>
        <v-btn flat to="/list">{{ $t("gratan") }}</v-btn>
      </v-toolbar-items>
    </v-toolbar>