Vue.js에서 Checkbox 값 설정하기: true-value와 false-value 사용

by

Vue.js는 사용자 입력 요소를 다루는 데 매우 유용한 기능을 제공합니다. 이 중에서도 checkbox 입력 요소의 값을 조절하는 것은 종종 필요한 작업 중 하나입니다. Vue.js에서 checkbox의 값과 true/false 값을 설정하려면 true-value와 false-value 속성을 사용할 수 있습니다. 이 블로그 포스팅에서는 이러한 기능을 자세히 살펴보겠습니다.


Checkbox와 true-value/false-value 속성

Vue.js에서 checkbox의 값은 기본적으로 true 또는 false로 나타납니다. 그러나 때로는 이를 커스터마이징하여 다른 값으로 설정하고 싶을 수 있습니다. 예를 들어, “예”와 “아니오” 대신 “Y”와 “N”을 사용하고 싶다면 true-value와 false-value 속성을 활용할 수 있습니다.

아래의 Vue.js 코드 예제를 살펴보겠습니다:

<template>
  <div>
    <h1>Checkbox 값 설정 예제</h1>
    <input type="checkbox" v-model="isChecked" true-value="Y" false-value="N" />
    <p>Checkbox 값: {{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: 'N', // 기본값은 "N"
    };
  },
};
</script>

위 코드에서는 true-value 속성을 “Y”로, false-value 속성을 “N”으로 설정하였습니다. 초기 상태에서 checkbox는 “N” 값을 가지며, 사용자가 체크하면 “Y”로 변경됩니다.


활용 사례

true-value와 false-value 속성은 checkbox 입력 요소의 값이 true 또는 false가 아닌 다른 값을 가져야 할 때 유용합니다. 예를 들어, 웹 어플리케이션에서 “동의합니다” 또는 “동의하지 않습니다” 대신 “Yes”와 “No” 값을 서버로 보내야 하는 경우에 유용하게 활용할 수 있습니다.

이러한 커스텀 설정을 통해 Vue.js로 폼 요소를 더욱 유연하게 다룰 수 있으며, 사용자 경험을 개선할 수 있습니다.



Leave a Comment