✅
リアクティブを保ちつつ複数のcheckboxを一つの配列にまとめる
実装イメージ
動的に生成したcheckboxのグループと値を、一つのオブジェクトに連携してます。
コード
vue.js
<script setup>
let queries = ref({});// オブジェクトを宣言
let checkboxes = `{group:name,boxes:[value1,value2]},{group2:name,boxes:[]...}といった感じのオブジェクト`;
checkboxes.forEach((checkbox) => {
Object.assign(queries.value, { [checkbox.group]: [] });// keyにグループ名を入れる
});
</script>
vue.js
<template v-for="checkbox in checkboxes">
<template v-for="box in checkbox.boxes">
<label><input type="checkbox" :id="checkboxes.group" :value="box" v-model="queries[checkboxes.group]" />{{ box }}</label>
<!-- グループ名（id）を指定し、オブジェクト内の配列に直接アクセスする -->
</template>
</template>
参考
フォーム入力バインディング
Discussion