[VueJS] v-model로 checkbox 처리

✅ v-model로 checkbox 처리

♐ 다중 체크박스 배열(Array)

여러 개의 체크박스의 경우 단순히 "선택 되었다"가 아니라 여러 개가 선택되었다는 집합의 성격을 나타낸다.
v-model로 바인딩 하게 되면 다음과 같이 checkedValues의 데이터 값은 배열(Array)가 된다.

<template>
    <div>
        <input type="checkbox" v-model="checkedValues" value="1">
        <input type="checkbox" v-model="checkedValues" value="2">
        <input type="checkbox" v-model="checkedValues" value="3">
        <input type="checkbox" v-model="checkedValues" value="4">
        {{checkedValues}}
    </div>
</template>

<script>
export default {
    data(){
        return{
            checkedValues: []
        }
    }
}
</script>

♐ 초기화를 안하는 경우

<script>
export default {
    data(){
        return{
            checkedValues: '',
        }
    }
}
</script>

모든 버튼들이 일제히 선택되며 불리언(boolean) 값으로 처리해버린다.