Vuetifyで開閉するフォームの見た目だけを作っていく。


作成するものは、こちらです。
<p class="codepen" data-height="600" data-theme-id="0" data-default-tab="html,result" data-user="muuuuminn-the-styleful" data-slug-hash="xeWpza" style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Vuetify Example Pen">
  <span>See the Pen <a href="https://codepen.io/muuuuminn-the-styleful/pen/xeWpza/">
  Vuetify Example Pen</a> by muuuuminn (<a href="https://codepen.io/muuuuminn-the-styleful">@muuuuminn-the-styleful</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


※Vuetifyの導入方法などは記載しておりません！

- 今回の登場人物
 - [v-expansion-panel](https://vuetifyjs.com/en/components/expansion-panels)
 - [v-form](https://vuetifyjs.com/en/components/forms#form)
 - [v-card](https://vuetifyjs.com/en/components/cards#card)

###1. `v-expansion-panel`でパカパカ開閉するのをつくる

```vuejs:vue

<div id="app">
  <v-app>

    <v-expansion-panel>
      <v-expansion-panel-content>
        <template v-slot:header>
          <div>押してね</div>
        </template>
        <p>中身</p>   
      </v-expansion-panel-content>
    </v-expansion-panel>
   
  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  data: {
  },
  computed: {
  }
})
</script>

```

###2. 開閉に応じて表示されるメッセージを変える

```vuejs:vue
<div id="app">
  <v-app>

    <v-expansion-panel expand v-model="isExpand">
      <v-expansion-panel-content>
        <template v-slot:header>
          <div>{{ expandMessage }}</div>
        </template>
        <p>中身</p>
      </v-expansion-panel-content>
    </v-expansion-panel>

  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isExpand: [], // 対象が一つであっても配列にする。
  },
  computed: {
     expandMessage() {
      return this.isExpand[0] ? '閉じる' : '開く';
      // 開いている:true、閉じている:false
    },
  }
})
</script>
```


###3. `v-expansion-panel`内に`v-form`を入れる

```vuejs:vue
<div id="app">
  <v-app>
    
    <v-expansion-panel expand v-model="isExpand">
      <v-expansion-panel-content>
        <template v-slot:header>
          <div>{{ expandMessage }}</div>
        </template>
        <v-form>
          <v-textarea  label="テキストエリア" readonly></v-textarea>
          <v-textarea  label="テキストエリア" outline></v-textarea>
          <v-btn class="primary" >投稿</v-btn>
          <v-btn class="accent">クリア</v-btn>
        </v-form>
      </v-expansion-panel-content>
    </v-expansion-panel>
    
  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isExpand: [],
  },
  computed: {
     expandMessage() {
      return this.isExpand[0] ? '閉じる' : '開く';
    },
  }
})
</script>

```


###4. `v-card`系を使って綺麗にする

```vuejs:vue
<div id="app">
  <v-app>
   
    <v-card width="90vw">
      <v-card-title class="primary">
        <div class="white--text">投稿フォーム</div>
      </v-card-title>
      <v-expansion-panel expand v-model="isExpand">
        <v-expansion-panel-content>
          <template v-slot:header>
            <div>{{ expandMessage }}</div>
          </template>
          <v-card-text>
            <v-form>
              <v-textarea  label="テキストエリア" readonly></v-textarea>
              <v-textarea  label="テキストエリア" outline></v-textarea>
              <v-btn class="primary" >投稿</v-btn>
              <v-btn class="accent">クリア</v-btn>
            </v-form>
          </v-card-text>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-card>

  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isExpand: [],
  },
  computed: {
     expandMessage() {
      return this.isExpand[0] ? '閉じる' : '開く';
    },
  }
})
</script>
```
ここまでで冒頭のものが出来上がります。

###おまけ：パカパカするのを複数つくる。
```vuejs:vue
<div id="app">
  <v-app>

    <v-card width="90vw">
      <v-card-title class="primary">
        <div class="white--text">投稿フォーム</div>
      </v-card-title>
      <v-expansion-panel expand v-model="isExpand">

        <v-expansion-panel-content>
          <template v-slot:header>
            <div>{{ expandMessage1 }}</div>
          </template>
          <v-card-text>
            一個目
          </v-card-text>
        </v-expansion-panel-content>
        
        <v-expansion-panel-content>
          <template v-slot:header>
            {{ expandMessage2 }}
          </template>
          <v-card-text>
            二個目
          </v-card-text>
        </v-expansion-panel-content>
        
      </v-expansion-panel>
    </v-card>

  </v-app>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isExpand: [],
  },
  computed: {
    expandMessage1() {
      return this.isExpand[0] ? '閉じる' : '開く';
    },
    expandMessage2() {
      return this.isExpand[1] ? '閉じる' : '開く';
    },
  }
})
</script>
```

###最後に
中身はフォームではなくてもよくて、使い方は様々です。