Vuetify 3 の Expansion Panel を自動的に開閉したい

概要

Vuetify 3 の Expansion Panel を、アプリ上の何かをトリガーにして自動的に開閉する実装をします

実装

そもそもの使い方

Expansion Panel を実装するには、基本的に以下のように記述すれば OK です

<v-expansion-panels>
  <v-expansion-panel>
    <v-expansion-panel-title>
      パネル 1 のタイトル
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      パネル 1 の中身
    </v-expansion-panel-text>
  </v-expansion-panel>

  <v-expansion-panel>
    <v-expansion-panel-title>
      パネル 2 のタイトル
    </v-expansion-panel-title>
    <v-expansion-panel-text>
      パネル 2 の中身
    </v-expansion-panel-text>
  </v-expansion-panel>
</v-expansion-panels>

パネルの中にテキストを入れるだけであれば、さらにちょっとだけ簡素にできます

<v-expansion-panels>
  <v-expansion-panel
    title="パネルのタイトル"
    text="パネルの中身"
  >
  </v-expansion-panel>
</v-expansion-panels>

開閉を制御するには

1. まずは v-expansion-panel にそれぞれ名前をつけてあげます。あとでこれを参照することになります。

   <v-expansion-panels>
     <v-expansion-panel
       value="samplePanel1"
     >
       <v-expansion-panel-title>
         パネル 1 のタイトル
       </v-expansion-panel-title>
       <v-expansion-panel-text>
         パネル 1 の中身
       </v-expansion-panel-text>
     </v-expansion-panel>
     
     <v-expansion-panel
       value="samplePanel2"
     >
       <v-expansion-panel-title>
         パネル 2 のタイトル
       </v-expansion-panel-title>
       <v-expansion-panel-text>
         パネル 2 の中身
       </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
   

2. 続いて v-expansion-panels に v-model を充てます。この値に v-expansion-panel の value が格納される格好です。

   <v-expansion-panels
     v-model="panel"
   >
     <v-expansion-panel
       value="samplePanel1"
     >
       <v-expansion-panel-title>
         パネル 1 のタイトル
       </v-expansion-panel-title>
       <v-expansion-panel-text>
         パネル 1 の中身
       </v-expansion-panel-text>
     </v-expansion-panel>
     
     <v-expansion-panel
       value="samplePanel2"
     >
       <v-expansion-panel-title>
         パネル 2 のタイトル
       </v-expansion-panel-title>
       <v-expansion-panel-text>
         パネル 2 の中身
       </v-expansion-panel-text>
     </v-expansion-panel>
   </v-expansion-panels>
   

   <script>
     export default {
       data () {
         return {
           panel: [],
         }
       },
     }
   </script>
   

   こうすることで panel に開いている状態のパネルの value が入るようになります。
   このあとは、panel の値をいじってあげれば OK です。

3. ボタンで実装してみます

   <template>
     <div>
       <v-btn @click="open">
         Open
       </v-btn>
       <v-btn @click="close">
         Close
       </v-btn>
     </div>
   </template>
   
   <script>
     export default {
       data () {
         return {
           panel: [],
         }
       },
       methods: {
         open () {
           this.panel = ["samplePanel1", "samplePanel2"]
         },
         close () {
           this.panel = []
         },
       },
     }
   </script>
   

   今回はボタンで実装しましたが、好みのトリガーでこれらの関数が発火するようにすれば、いろいろできるはずです！

まとめ

v-expansion-panels 充てた v-model に v-expansion-panel の value が格納されます。この配列の値をいじることで、開閉を制御できます。