12. Vue 체크박스 구현

 

2024-05-21

vue에서 체크박스 구현 중에 전체 선택 및 해제 기능을 어떻게 깔끔하게 만들까 고민하다가 만든 기능을 메모함.

---

1. b-form-checkbox

• Vue.js와 Bootstrap을 함께 사용하여 웹 애플리케이션을 개발할 때 사용되는 컴포넌트이다.
• 사용자에게 체크박스 입력 요소를 제공하고, Vue.js의 데이터와 양방향 데이터 바인딩을 통해 선택 사항을 관리할 수 있게 하며, 이 컴포넌트는 Bootstrap 프레임워크의 스타일을 사용하여 시각적으로 강력하고 사용하기 쉽다.

<template>
  <div>
    <b-form-checkbox
      id="checkbox-1"
      v-model="status"
      name="checkbox-1"
      value="accepted"
      unchecked-value="not_accepted"
    >
      I accept the terms and use
    </b-form-checkbox>

    <div>State: <strong>{{ status }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        status: 'not_accepted'
      }
    }
  }
</script>

 

https://bootstrap-vue.org/docs/components/form-checkbox

 

 

2. 개발 진행

 

• template안의 소스 : b-form-checkbox을 두 개를 만들어주고 스타일로 조절

<div class="gray-border-wrap mr-1">
          <div class="label-title ml-3 mr-4">품목</div>
          <b-form-checkbox
              class="
                      checkbox-group-horizontal
                      grid-nav-group
                      w-100
                      justify-content-end
                      text-secondary
                      mr-2
                  "
              v-model="chkCtgrAllChecked"
              @change="handleAllCheckboxChange"
          >
            전체
          </b-form-checkbox>
          <b-form-checkbox-group
              class="
                      checkbox-group-horizontal
                      grid-nav-group
                      w-100
                      justify-content-end
                      text-secondary
                      mr-4
                  "
              v-model="filter.chkCtgrCd"
              @change="handleCheckboxChange"
              :options="chkCtgrCdOpt"
          />
        </div>

 

 

• data 형식은 전체 항목의 체크박스는 boolean으로 설정 후 true로 default 함

data() {
      return {
        filter: {
          bzpcDvpc: 'B',
          chkCtgrCd: ['P1','P5', 'P10'],
          dvpc: '',
          ordReqType: '2',
          startDate: '',
          endDate:''
        },
        bzpcDvpcOpt: [
          { text: '123', value: 'B'}
        ],
        chkCtgrAllChecked: true,
        chkCtgrCdOpt: [
          { text: 'P1', value: 'P1' },
          { text: 'P5', value: 'P5' },
          { text: 'P10', value: 'P10' }
        ],

 

 

• methods는 handleAllCheckboxChange는 전체 체크 항목에 따른 이벤트, 
  handleCheckboxChange는 그외 체크 항목의 이벤트이며 if 문 보다 삼항식으로 깔끔하게 정리

handleAllCheckboxChange(checked) {
    this.filter.chkCtgrCd = checked ? ['P1', 'P5', 'P10'] : [];
},
handleCheckboxChange() {
    const chkCtgrLen = this.filter.chkCtgrCd.length;
    this.chkCtgrAllChecked = chkCtgrLen === 3;
}