Vue'da Radio ile Çalışma

Radio ile çalışma benzer şekilde gerçekleşir. Hadi pratikte görelim. Öncelikle, bir grup radio'ya bağlayacağımız choice özelliğini yapalım:

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

Şimdi bir radio grubu yapalım:

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

Her birine v-model direktifini yazalım ve onu choice özelliğine bağlayalım:

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>

Ayrıca her birine kendi value değerini verelim:

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>

Artık choice özelliğinde her zaman seçili radio'nun value değeri bulunacak:

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