【Vue3】Vuetifyのチェックボックスのv-modelへの値設定

概要

Vuetifyでチェックボックスのコンポーネントを使用する際、v-modelへの値設定のやり方が複数あります。
こちらのCheckboxesのドキュメントにおけるModel as booleanとModel as arrayにある通り、値をbooleanで設定する場合と配列で設定する場合の
2パターンが記載されています。今回はその実装のメモ書きです。

前提

• 使用したVuetifyのバージョンは3.6.11です。

実装サンプル

値をbooleanで設定する場合

以下の例では、booleanの値を管理するcheckedValueをrefで設定して、v-modelに設定します。

<script setup lang="ts">

const checkedValue = ref(false);

</script>

<template>
    <v-checkbox v-model="checkedValue" label="単独チェック"></v-checkbox>
</template>

複数のチェックボックスの値を配列で設定する場合

以下の例では、SampleCategoryというidとnameを持つ型の配列で、どれがチェックされたかを管理します。checkedCategoryIdsをrefで設定して、チェックされたvalueのidを管理します。

<script setup lang="ts">

const props = defineProps({
    categories: {
        type: Array as () => Array<SampleCategory>,
        default: []
    },
})

const checkedCategoryIds = ref([] as string[]);

</script>

<template>
    <v-list lines="two" max-width="500px">
        <v-list-item v-for="category in props.categories" :key="category.id">
            <v-checkbox :value="category.id" v-model="checkedCategoryIds" :label="category.name"></v-checkbox>
        </v-list-item>
    </v-list>
</template>