반응형
약관동의 관련 작업을 하면서
체크박스 전체 선택 처리와 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 에 없는 항목을 리턴받아 처리하였다.
반복문으로 처리할까 하다가 항목이 두개뿐이라서 필터로 구현했다.
반응형