HTML에서 체크박스는 선택을 하거나 하지 않는 것을 표현한다. 예/아니오를 표현하려면 라디오 버튼을 사용해야 한다. 즉, HTML 요소가 두 개여야 한다.
체크박스는 여러 개 중 여러 개를 선택하는 데 사용한다. “다음 중 취미를 있는 대로 고르세요” 같은 질문에 사용하는 것이다.
그런데 현실에서는 “ㅁ 동의합니다” 같은 곳에 사용된다. 체크를 하면 true
고, 체크를 하지 않으면 false
인 것이다.
Vue에서는 기본적으로 그렇게 인지를 한다. 따라서 그냥 불리언 값으로 값을 얻고 싶다면 다음 코드로 충분하다.
<input type="checkbox" v-model="agreement">
(물론 Vue 객체의 data만 그렇게 된다. form을 submit하는 경우에는 언어에 따라 다른 값으로 인식하게 된다.)
그런데 체크를 하면 yes
, 체크를 하지 않으면 no
로 하고 싶다면?
다음과 같이 쓰면 된다.
<input type="checkbox" v-model="agreement" true-value="yes" false-value="no">
이렇게 js 코드를 받을 수도 있다.
<input type="checkbox" v-model="agreement" :true-value="trueValueMethod()" :false-value="falseValueMethod()">
댓글 남기기