코드

<template>
  <ul>
    <li v-for="(data, i) in datas" :key="i">
      <div>
        <input :id="`checkbox` + i" v-model="checkArr" type="checkbox" :value="data.value" />
        <label :for="`checkbox` + i">{{data.name}}</label>
      </div>
    </li>
  </ul>
</template>

<script setup>
const datas = [
  {
    name: '이거',
    value: 'this'
  },
  {
    name: '저거',
    value: 'that'
  },
  {
    name: '나',
    value: 'me'
  }
]

const checkArr = [];
</script>

v-model의 배열 동기화

• v-model="checkArr"을 하면 :value인 data.value가 자동으로 checkArr에 들어갔다 나왔다 한다.