今回はVue.jsのコンポーネント内でトグル機能を実装する方法をまとめていきたいと思います。一般的なウェブサイトやアプリケーションでもよく見かける機能で、jQueryを使う場合やDOMの操作でclassを切り替えるなどでも実装してきた例もあるかと思いますが、Vue.jsの場合にはこれまでと少し異なるので、ぜひ覚えておきましょう。では早速コードを見ていきます。 【Vue】

<template>
 <div id="app">
  <button v-on:click="toggle_switch()">Toggle Button</button>
  <p v-if="isActive === false">初期表示の内容
  </p>
  <p v-else>クリックで切り替わった内容
  </p>
 </div>
</template>

<script>
 export default {
  data: function() {
   return {
    isActive: false
   }
  },
  methods: {
   toggle_switch: function() {
    this.isActive = !this.isActive
   }
  }
 }
</script>

  HTMLのテンプレート側では、クリックする要素（上記ではbutton要素）と、切り替わる内容をそれぞれ用意します。そしてスクリプトでは、「data」オプションで切り替わる時の状態を表す値を入れておきます。続いて「methods」オプションで、dataオプションの値が切り替わる関数を設定しています。上記のように設定することで値が交互に切り替えることができます。   テンプレートのHTMLに戻り、クリックする要素には「v-on」ディレクティブにclickを指定します。このv-onディレクティブでイベントを設定することができます。今回はそのイベントにclickを設定しています。そして値には先ほどmethodsオプションで設定した関数を入れます。   最後に切り替わる内容に「v-if」ディレクティブを設定することで条件分岐ができるようにします。v-ifの値には当てはまる条件式を入れます。後に続く要素には「v-else」を指定することを忘れずに。   これでクリックで動的に内容が切り替わるトグル機能が実装できました。consoleなどのデバックツールで確認すると、dataオプションで設定した値が切り替わっているのがわかりますね。   ちなみにですが、「v-on」ディレクティブでイベントを設定する際には下記のように@を用いた省略記法も用意されています。慣れてくるとこちらの記法で記述すると楽ですね。

<button @click="toggle_switch()">Toggle Button</button>

 

---

  いかがでしょうか、jQueryなどでもよく使われていたトグル機能ですが、このようにVue.jsでも簡単に実装することができます。使いどころは多く、応用もたくさんあるのでぜひ覚えておきたいですね。