[Vue.js] 체크박스 값을 boolean(true/false) 대신 'Y/N' 으로 바꾸기

상황

Vue.js에서 체크박스에 바인딩 된 모델의 값은 기본적으로 true / false 이다. 근데 고객 놈들의 디비는 Y/N 문자로 관리한다.

<input
  type="checkbox"
  v-model="toggle"
>

해결

input의 true-value와 false-value props를 사용한다. 주의할 점은, 이 값은 form submit 시 체크되지 않은 값은 전송되지 않는다는 점이다. 나는 form submit 하지 않고 바인딩된 모델 json을 전송해서 사용하므로 상관없었다.

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

참고

https://kr.vuejs.org/v2/guide/forms.html#%EC%B2%B4%ED%81%AC%EB%B0%95%EC%8A%A4-1