[Nuxt.js] 체크박스 전체선택

📌 체크박스 전체선택

1. 기본구조

<div class="list">
      <h3 class="mb-16">도슨트</h3>
      <div class="list-top mb-16">
        <SButton @click="deleteInfo">삭제</SButton>
        <SButton button-type="primary" @click="onRegisterDocentModal(true)">등록</SButton>
      </div>
      <table class="admin-table">
        <thead>
          <tr>
            <th><SCheckbox v-model="isCheckedAll" @input="setCheckedAll" /></th>
            <th>썸네일</th>
            <th>작품명</th>
            <th>소개글</th>
            <th>지도</th>
            <th>오디오</th>
            <th>수정</th>
          </tr>
        </thead>
        <tbody v-if="!detailData.infos || !detailData.infos[0]">
          <tr>
            <td colspan="11"><div>리스트가 없습니다.</div></td>
          </tr>
        </tbody>
        <Draggable v-bind="dragOptions" v-model="detailData.infos" tag="tbody">
          <tr v-for="(item, index) in detailData.infos" :key="item.id">
            <td>
              <div>
                <SCheckbox v-model="item.isChecked" :check-value="item.id" />
              </div>
            </td>
            <td>
              <div class="img">
                <img :src="`${$store.state.BASE_URL}${item.thumbnail?.savedFileName}`" alt="테스트" />
              </div>
            </td>
            <td>
              <div class="text-left">
                {{ item.title }}
              </div>
            </td>
            <td>
              <div class="text-left">
                {{ item.intro }}
              </div>
            </td>
            <td>
              <div>
                {{ item.map ? 'Y' : 'N' }}
              </div>
            </td>
            <td>
              <div>
                {{ item.audio ? 'Y' : 'N' }}
              </div>
            </td>
            <td>
              <div>
                <SButton w-size="small" @click="onRegisterDocentModal(false, index)">수정</SButton>
              </div>
            </td>
          </tr>
        </Draggable>
      </table>
    </div>

2. 스크립트 구조

get 요청때 detailData에 infos에 isChecked를 넣어줌.
watch로 detailData.infos 데이터 변화를 감지하여 every 를 통하여 모든 체크의 조건이 맞는지 확인하여 전체 선택 체크 확인
setCheckedAll 함수로 true를 받으면 모든 isChecked가 true로 false를 받으면 false로 변환
deleteInfo 함수로 detailData.infos 를 filter로 false 인 부분들은 걸러줌

export default {
  name: 'EditPage',
  async asyncData({ params, $axios, redirect, $dayjs }) {
    const { id } = params;
    const isNew = id == null;
    const detailData = id
      ? await $axios
          .$get(`/admin/docents/${id}`)
          .then((detailData) => ({
            ...detailData,
            infos: detailData.infos.map((info) => ({ ...info, isChecked: false })),
            startDate: $dayjs(detailData.startDate).format('YYYY-MM-DD'),
            endDate: $dayjs(detailData.endDate).format('YYYY-MM-DD')
          }))
          .catch(() => {
            redirect('/admin/common/docent');
          })
      : cloneDeep(DOCENTS_DETAIL);
    return { id, isNew, detailData };
  },
  data() {
    return {
      isCheckedAll: false
    };
  },
watch: {
    'detailData.infos': {
      deep: true,
      handler(newValue) {
        this.isCheckedAll = newValue.every((item) => item.isChecked);
      }
    }
  },
  methods: {
    deleteInfo() {
      this.detailData.infos = this.detailData.infos.filter((info) => !info.isChecked);
    },
    setCheckedAll(newValue) {
      this.detailData.infos.forEach((info) => {
        info.isChecked = newValue;
      });
    },
	}