[Vue] input checkbox value 'Y' 'N'으로 설정

# Vue.js input property 사용하기

checkbox type의 input태그의 기본 값은 true/false이다.
DB에서 true/false가 아닌 'Y'/'N'이나 'yes'/'no' 등으로 관리할 경우
input tag property인 true-value와 false-value를 사용한다.
v-model을 사용하여 기본 값을 넣어줘야 제대로 들어간다.

<input type="checkbox" v-model="data.isSecure" true-value="Y" false-value="N">

주의할 점은 form submit을 할 경우 체크되지 않은 값은 전송되지 않는다.
v-model로 바인딩하여 전송한다면 문제없다.

# 사용 예

...
  <input type="checkbox" v-model="item.isSecure"  true-value="Y" false-value="N">
...
<script>
    window.app = new Vue({
        el: '#app',
        data: {
            item: {
                isSecure: 'N',
            }
        },
        methods: {
            writeBoard() {
                axios.post("URL", this.item, {
          		...

 

# change event 사용해서 직접 value 넣어주기

file type input에는 v-model을 사용하지 못하기 때문에 form에 type이 file인 input이 있다면 문제가 된다.
아래의 방법은 form submit으로도 전송할 수 있다.

<input class="custom-control-input" type="checkbox" id="isSecure" name="isSecure" @change="check">

...
check(e){
  if(e.target.checked){
       e.target.value = 'Y';
  }else{
       e.target.value = 'N';
  }
}