Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12

Vue.js에서 체크박스 하나만으로 true, false값 잡기

true-value, false-value 속성을 주면 된다.

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()">

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다