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()">
댓글 남기기