複数チェック可能なボタンのmethodsの効率の良い書き方

前提

vue(nuxt)にて複数のボタンが並んでおり、チェックしたらselectedというクラスがつきます。それらは排他関係ではなくチェックボックスのようなイメージで、再度チェックすればそのボタンからはそのクラスがはずれます。すでに実現できているのですが書き方が壮絶にダサいので効率の良い書き方があればしりたいです。

該当のソースコード

<ul class="select-item-list">
  <li :class="{'iselected': isActive1}" @click="CheckActive1()">
    aaa
  </li>
  <li :class="{'selected': isActive2}" @click="CheckActive2()">
    bbb
  </li>
  <li :class="{'selected': isActive3}" @click="CheckActive3()">
    ccc
  </li>
  <li :class="{'selected': isActive4}" @click="CheckActive4()">
    ddd
  </li>
</ul>

中略


export default {
  data () {
    return {
      CheckActive1: false,
      CheckActive2: false,
      CheckActive3: false,
      CheckActive4: false,
    }
  },
  methods: {
    CheckActive1() {
      this.CheckActive1 = !this.CheckActive1
    },
    CheckActive2() {
      this.CheckActive2 = !this.CheckActive2
    },
    CheckActive3() {
      this.CheckActive3 = !this.CheckActive3
    },
    CheckActive4() {
      this.CheckActive4 = !this.CheckActive4
    }
  }
}

実際はもっとボタン数が多くメンテナンス性も悪いので、
できれば数が増えてもメソッドなどいじらない方法で書きたいです。
ご教授お願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

同じボタンを複数配置するなら、配列とv-forを使うのが良いと思います。

配列とv-forを使う例:

Codepen: https://codepen.io/luuguas/pen/oNyWdzP

html
1<ul class="select-item-list">
2  <li v-for="(name, index) in listName" :key="index"
3      :class="{ selected: isActive[index] }"
4      @click="onClick(index)">
5    {{ name }}
6  </li>
7</ul>

js
1  data() {
2    return {
3      listName: ['aaa', 'bbb', 'ccc', 'ddd'],
4      isActive: [],
5    };
6  },
7  created() {
8    this.isActive = new Array(this.listName.length);
9    this.isActive.fill(false);
10  },
11  methods: {
12    onClick(key) {
13      this.isActive[key] = !this.isActive[key];
14      //Vue2.0の場合
15      //Vue.set(this.isActive, key, !this.isActive[key]);
16    },
17  },