タグなど、複数の選択肢の中から、複数の要素を選択できるような実装をする機会があったのでメモ

動作イメージ

via GIPHY

コード

<template>
  <div>
    <v-row justify="center" align="center">
      <v-col cols="10">
        <v-card class="mt-5 pa-5">
            <v-card-title>複数選択可能</v-card-title>
            <span>{{selected}}</span>
            <v-layout wrap>
              <v-flex v-for="genre in genres" :key="genre.id" >
                <v-checkbox v-model="selected" :label="genre.name" :value="genre.id"></v-checkbox>
              </v-flex>
            </v-layout>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [],
        genres: [
          { id: 0, name: 'aaa' },
          { id: 1, name: 'bbb' },
          { id: 2, name: 'ccc' },
          { id: 3, name: 'ddd' },
          { id: 4, name: 'eee' },
        ],
      }
    },
  }
</script>

注目すべきは

<v-checkbox v-model="selected" :label="genre.name" :value="genre.id"></v-checkbox>

ですね

labelに渡す値をいじれば表示を変えることができて、
valueに渡す値をいじればselectedに追加される値を調整することができます。

なので回す配列はただの値ではなく、オブジェクトの配列を回して与えてあげるのが便利そうですね