[Vue.js] 배열을 사용한 다중 체크박스 바인딩

<template>
  <div>
    <!-- 예제 1: 체크된 항목을 표시하는 부분 -->
    <div>체크된 이름: {{ checkedNames }}</div>

    <!-- 예제 2: 다중 체크박스 -->
    <input type="checkbox" id="jack" value="젝" v-model="checkedNames">
    <label for="jack">젝</label>

    <input type="checkbox" id="john" value="존" v-model="checkedNames">
    <label for="john">존</label>

    <input type="checkbox" id="mike" value="마이크" v-model="checkedNames">
    <label for="mike">마이크</label>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 체크된 이름을 저장하는 ref
    const checkedNames = ref([]);

    return {
      checkedNames
    };
  }
};
</script>

Vue에서 배열이나 Set을 사용하여 여러 개의 체크박스 값을 바인딩할 수 있습니다. 이를 활용하여 여러 항목을 선택할 수 있는 다중 체크박스를 구현할 수 있습니다.

1. 예제 1: 체크된 항목을 표시하는 부분입니다. 사용자가 체크박스를 클릭할 때마다 해당 항목이 checkedNames 배열에 추가 또는 제거됩니다.

2. 예제 2: 다중 체크박스를 보여주는 부분입니다. 각 체크박스는 v-model 디렉티브를 사용하여 checkedNames 배열과 양방향으로 바인딩되어 있습니다. 사용자가 체크박스를 선택하면 해당 값이 checkedNames 배열에 추가되고, 해제하면 제거됩니다.

Vue에서 배열을 사용한 다중 체크박스 바인딩을 통해 사용자가 여러 항목을 선택할 수 있으며, 선택된 항목을 간단하게 관리할 수 있습니다.