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

作成するものは、こちらです。

See the Pen
Vuetify Example Pen by muuuuminn (@muuuuminn-the-styleful)
on CodePen.

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

• 今回の登場人物
  • v-expansion-panel
  • v-form
  • v-card

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

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. 開閉に応じて表示されるメッセージを変える

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を入れる

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系を使って綺麗にする

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>

ここまでで冒頭のものが出来上がります。

おまけ：パカパカするのを複数つくる。

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>

最後に

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