タグなど、複数の選択肢の中から、複数の要素を選択できるような実装をする機会があったのでメモ
動作イメージ
コード
<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に追加される値を調整することができます。
なので回す配列はただの値ではなく、オブジェクトの配列を回して与えてあげるのが便利そうですね