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を利用して、クリックしたときにactiveItemがnになるようにする
2. activeItemがnになったときにclass（今回の場合は.is-active）が付くようにする
3. すでにactiveItemがnになっているときは、nをnullにする（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で状態のチェックをしてあげれば作成できます。