# 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';
}
}
728x90