[VueJS] v-model로 checkbox 처리

ieed0205·2021년 1월 14일
2

VueJS

목록 보기
18/21
post-thumbnail

✅ 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) 값으로 처리해버린다.

profile
🔥 머릿속으로 생각하지만 말고, 행동으로 보여줘

0개의 댓글