WebDesigner's Memorandumウェブデザイナーの備忘録

Vue.jsのv-forで生成した要素をクリックするたびに、classをトグルで付け外しする方法

Vue.jsのv-forで生成した要素をクリックするたびに、classを付け外しする方法

Vue.jsのv-forで複数の要素を生成した要素に、クリックするたびにclassをトグルで付け外しするためにはどうすればいいのでしょうか?

  • classが付くのは常に1つの要素のみ
    • すでに要素にclassが付いている状態で、別の要素をクリックした場合は、クリックした要素にclassが付く(それ以外の要素からはclassは外れる)

jQueryの場合はremoveClassですべての要素からclassを外して$(this)addClassするだけで済むのですが、Vue.jsの場合は少し工夫が必要です。

考えればすぐに分かりましたが、調べみても出てこなかったので備忘録として残しておきます。

v-forで生成した要素にトグルでclassを付け外しする

実装の考え方は下記の通りです。

  1. v-forでループするときに使ったnを利用して、クリックしたときにactiveItemnになるようにする
  2. activeItemnになったときにclass(今回の場合は.is-active)が付くようにする
  3. すでにactiveItemnになっているときは、nnullにする(classが外れる)

See the Pen Vue.js toggle item by Masakazu Saito (@31mskz10) on CodePen.

コピー用のコードは下記になります。

<ul>
  <li v-on:click="onActive(n)" v-for="n of 6" :key="n" v-bind:class="{ 'is-active': activeItem === n }">Item {{n}}</li>
</ul>
(function() {
    'use strict';
    var vm = new Vue({
    el: 'ul',
    data() {
      return {
        activeItem: null
      }
    },
    methods: {
      onActive(n) {
        if(this.activeItem === n){
          this.activeItem = null;
        }else{
          this.activeItem = n;
        }
      }
    }
  });
})();

要素が複数なので今回はnを使いましたが、1つの場合はtrue / falseで状態のチェックをしてあげれば作成できます。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね