[Vue.js] 체크박스 전체선택 관련 간단 정리

약관동의 관련 작업을 하면서

체크박스 전체 선택 처리와 validation 체크 구현이 필요하여 작업한 내용을 정리해본다.

 

* HTML 영역

<input type="checkbox" v-model="agreeAll" value="all"> <!-- 전체선택 -->

<input type="checkbox" v-model="agreeChecked" value="agree1"> <!-- 동의1 -->
<input type="checkbox" v-model="agreeChecked" value="agree2"> <!-- 동의2 -->

* Script 영역

data: function () {
    return {
    	.....
    	agreeCheckList: ["agree1", "agree2"],	// 비교를 위한 전체 CheckList 변수
    	agreeChecked: [],			// 체크 된 목록을 담을 배열 변수
    	....
    }
},
computed: {
    agreeAll: {
        get: function () {
            return this.agreeCheckList.length === this.agreeChecked.length;
        },
        set: function (event) {
            this.agreeChecked = event? this.agreeCheckList : []; // 전체 대상을 넣거나 비우는 역할
        },
    }
}

간단히 설명하면

1. 전체선택 v-model 인 agreeAll 은 computed 로 만들어 줌.

2. agreeCheckList 는 전체 선택시 대상이 되는 모든 value 값을 미리 넣어두어 실제 체크 된 항목과 비교하기 위함.

3. agreeChecked는 실제 체크 된 항목만 저장되는 model

 

* 동의 여부 체크 로직

// 체크여부 확인
if( this.agreeChecked.length !== this.agreeCheckList.length ){

    const notChecked = this.agreeCheckList.filter(v => !this.agreeChecked.includes(v));
    if( notChecked[0] === "agree1") {
        alert('agree1는 필수입니다.');
        return;
    }
    if( notChecked[0] === "agree2") {
        alert('agree2는 필수입니다.');
        return;
    }
}

agreeCheckList 에 필터를 사용하여 agreeChecked 에 없는 항목을 리턴받아 처리하였다.

반복문으로 처리할까 하다가 항목이 두개뿐이라서 필터로 구현했다.