체크박스 관리

대충 요로코롬 생겨먹은 체크박스

<template>
  <input type="checkbox" v-model="selectAll" class="checkbox" />
</template>

<script>
export default {
  computed: {
    // 부모 체크박스(전체 선택)의 상태를 설정하는 컴퓨티드 프로퍼티
    selectAll: {
      get() {
        // 모든 자식 체크박스가 선택되었는지 확인
        return (
          this.data &&
          this.data.length > 0 &&
          this.data.every((item) => item.selected)
        );
      },
      set(value) {
        // 부모 체크박스 상태에 따라 모든 자식 체크박스를 선택/해제
        if (this.data) {
          this.data.forEach((item) => (item.selected = value));
        }
      },
    },

    // 선택된 항목 수를 반환하는 컴퓨티드 프로퍼티
    selectedItemCount() {
      const count = this.data ? this.data.filter((item) => item.selected).length : 0;
      return count === 0 ? '' : count;
    },
  },

  methods: {
    /** 부모 체크박스 상태를 토글하여 모든 자식 체크박스 선택/해제 */
    toggleSelectAll() {
      this.selectAll = !this.selectAll;
    },

    /** 선택된 항목을 배열로 반환 (없을 시 경고) */
    getSelectedItems() {
      const selectedItems = this.data.filter((item) => item.selected);
      if (selectedItems.length === 0) {
        alert("선택 항목없음;;;;;");
        return null;
      }
      return selectedItems;
    },
  },
};
</script>

1. selectAll (computed):
   • get과 set을 사용하는 양방향 바인딩 컴퓨티드 프로퍼티
   • get: 모든 자식 체크박스가 선택된 상태인지 확인하여 부모 체크박스(selectAll)의 상태를 반환
   • set: 부모 체크박스의 선택 상태를 모든 자식 체크박스에 적용
2. selectedItemCount (computed):
   • 선택된 항목의 수를 계산하여 반환
   • 선택된 항목이 없을 때는 빈 문자열을 반환해 표시를 제어
3. toggleSelectAll() (method):
   • selectAll의 상태를 반전시켜 모든 자식 체크박스의 선택 상태를 변경
4. getSelectedItems() (method):
   • 선택된 항목이 없으면 경고 메시지를 표시하고, 선택된 항목이 있을 경우 그 항목들을 배열로 반환

 

selectAll 체크박스를 통해 자식 체크박스의 선택 상태를 관리