ボタントグルコンポーネント — Vuetify

ボタントグルコンポーネントを使用すると、選択可能な一連のボタンを単一の要素にまとめることができます。

vuetifyjs.com

サンプルコード

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を設定します。