vue 체크박스 연습

<template>
    <div>
        <label>
            <input type="checkbox" v-model="allSelected"/> 모두선택 <br>
            <!-- a llSelected -->
        </label>


        <label>
            <input type="checkbox" v-model="needsAllSelect" /> 필수만 선택  <br>
        </label>


        <label v-for="(checkLists, index) in checkLists" :key="index">
            <input
                type="checkbox"
                :value="checkLists"
                v-model="selectList"
            />[필수] {{ checkLists.word }} <br>
        </label>


        <label v-for="(subCheckLists, index) in subCheckLists" :key="index">
            <input 
            type="checkbox" 
            :value="subCheckLists" 
            v-model="subSelectList"
            />[선택] {{subCheckLists.word}} <br>
            <!-- v-for로 subCheckLists의 데이터를 가져오고 subCheckLists객체의 word를 가져옴  -->
        </label>


        <label>
            <input type="checkbox" :disabled="this.needsAllSelect == false"> 마지막 체크박스 <br>
            <!-- disabled 기능을 통해 needsAllSelect의 값이 false일땐 off true 일땐 on으로 만듦 -->
        </label>


        <!-- <span>check: {{ selectList }}{{needsAllSelect}}</span>
        <br>
        <span>{{subSelectList}}{{allSelected}}</span>   
        <suv-test/> -->
    </div>
</template>

<script>

export default {
  data() {
    return {
        // 필수사항 체크리스트에 출력되는 값들 
        checkLists: [
            { word: "개인정보처리방침", id: 1},
            { word: "이용약관", id: 2 },
            { word: "ㅁㄴㅇㄹ" , id: 3 },
        ],
        subCheckLists: [
            { word: "이건 ", id: 1 },
            { word: "안중요한", id: 2 },
            { word: "것들" , id: 3 },
        ],
        // checkList에서 체크된 값들을 저장함 값이 저장되면 체크도 됨 
        // 어떤 데이터들이 체크되었는지를 확인하기 위함 
        selectList: [],
        subSelectList: []
    };
    },
    computed: {
    needsAllSelect: {
    //getter
        get: function() {
            return this.checkLists.length === this.selectList.length;
            // true false를 반환시켜 마지막 체크박스를 on/off 시킴 
        },
    //   setter
        set: function(e) {
        this.selectList = e ? this.checkLists : [];
      },
    },
    // if else로 풀어서 식을 전개하면 이런식이된다 
    //           set: function(e){
    //                if(e){
    //           this.selectList = this.checkLists
    //             }else {
    //             this.selectList = [];
    //             }
    //           }
    // true와 false가 날라오고 그것에 따라 체크'된' 리스트를 저장하는 selectList에 체크'될' 항목들인 checkLists의
    // 데이터를 집어넣어 모든 체크박스를 활성화 시킨다. 
    // 양방향 데이터 바인딩이라서? 

    // 위의 함수에서 서브 체크리스트를 포함한 함수 
    allSelected: {
        set: function(e) {
        this.subSelectList = e ? this.subCheckLists : [];
        this.selectList = e ? this.checkLists : [];
      },
    }
  },
};

</script>

모든코드.