vueで開いたり閉じたりするコンポーネントを作る

最近vanillaのjavascriptで開いたり閉じたりするUIを作ってて、すっげぇ苦労したので、 「くっ…!!(vueなら簡単に書けるのに…!!)」という気持ちを発散するために、実際に作ってみた。

仕様

開くボタン

  • 「開く」ボタンをクリックするとフォームが開く。
    • 開いている間は開くボタンは消える。

閉じるボタン

  • フォームには「閉じる」ボタンがあり、押すとフォームが閉じる。
    • 閉じている間は閉じるボタンは消える。

作ったもの

See the Pen Vue expand form by clash_m45 (@clash_m45) on CodePen.

コード

styleをはしょってるので、全文はcodepenのほう見てください。

単純に v-if を使って、プロパティ expand がtrueのとき開く、としているだけ。 buttonのon-clickで openメソッド、closeメソッドを呼んで、 expandを書き換えると、vueの力でbindingされて、動的にUIが変化する!

素晴らしい!

<template>
  <div>
    <h3>開いたり閉じたりする入力フォーム</h3>
    <hr>

    <button v-if="!expand" @click="open">開く</button>
    <div v-if="expand">

      <label for="hamburger">Do you like hamburger?</label>
      <input type="checkbox" name="hamburger" id="hamburger">
      <span>checked</span>
      <br>

      <button @click="close">閉じる</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "count",
    data () {
      return {
        expand: false
      }
    },
    methods: {
      open: function() {
        this.expand = true
      },
      close: function() {
        this.expand = false
      }
    }
  }
</script>