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

URL: https://webrandum.net/vue-v-for-toggle-class/
公開日: 2020-03-12
更新日: 2020-04-05
カテゴリー: コーディング
タグ: Vue.js
出典: Webrandum（著者: サイトウ マサカズ）

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

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

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

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

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

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

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

See the Pen [Vue.js toggle item](https://codepen.io/31mskz10/pen/GRJOzvZ) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

```
<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`で状態のチェックをしてあげれば作成できます。