Vue에서 radio 다루기

radio 작업도 유사한 방식으로 이루어집니다. 실제로 살펴보겠습니다. 먼저, 우리가 radio 그룹에 바인딩할 속성 choice를 만듭니다:

javascriptdata() {
  return {
    choice: '',
  }
}

이제 radio 그룹을 만듭니다:

App.vue<template>
  <input name="radio" type="radio">
  <input name="radio" type="radio">
  <input name="radio" type="radio">
</template>

각각에 지시어 v-model를 작성하고 속성 choice에 바인딩합니다:

App.vue<template>
  <input name="radio" type="radio" v-model="choice">
  <input name="radio" type="radio" v-model="choice">
  <input name="radio" type="radio" v-model="choice">
</template>

또한 각각에 고유한 value를 부여합니다:

App.vue<template>
  <input name="radio" type="radio" v-model="choice" value="v1">
  <input name="radio" type="radio" v-model="choice" value="v2">
  <input name="radio" type="radio" v-model="choice" value="v3">
</template>

이제 속성 choice에는 항상 선택된 radio의 value가 들어가게 됩니다:

App.vue<template>
  you choosed: {{ choice }}
</template>