【Vuetify】トグルボタン「v-btn-toggle」の使い方と注意点

Vuetifyでトグルボタンを実装する方法を紹介します。

サンプルコード

Vuetifyではv-toggle-btnを使用すると、かんたんにトグルボタンを実装することができます。

はじめに基本となるサンプルコードを紹介します。

<v-btn-toggle v-model="sample">
      <v-btn>A</v-btn>
      <v-btn>B</v-btn>
      <v-btn>C</v-btn>
</v-btn-toggle>

複数のv-btnをv-btn-toggleで囲むことで、トグルボタンとすることができます。

デフォルトでは、選択されているボタンのインデックスがv-btn-toggleのv-modelに格納されます。

<v-btn-toggle v-model="sample">
      <v-btn>A</v-btn>
      <v-btn>B</v-btn>
      <v-btn>C</v-btn>
</v-btn-toggle>

たとえば上のサンプルでAをクリックすると0、Bをクリックすると1がv-modelにセットされます。

ボタンを選択したときに反映される値を任意の値に変更したいときは、v-btnにvalue属性を設定します。

<v-btn-toggle v-model="sample">
      <v-btn :value="a">A</v-btn>
      <v-btn :value="b">B</v-btn>
      <v-btn :value="c">C</v-btn>
</v-btn-toggle>

ここで注意すべきなのがコロンのつけ忘れ。コロンを忘れていると、v-modelに値が反映されませんので、要注意です。

トグルボタンにもイベントを設定することができます。

トグルボタンのクリックをきっかけに処理を行いたいときは、v-btn-toggleに@changeを設定します。いずれかのボタンがクリックされ、値が変更された場合に発火します。

特定のボタンがクリックされたときのみ処理を行いたいときは、v-btnに@clickを設定します。