Penggunaan Radio dalam Vue

Penggunaan radio dilakukan dengan cara yang serupa. Mari kita lihat secara praktik. Pertama, buat sifat choice yang akan kita ikat kepada kumpulan radio:

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

Sekarang buat kumpulan radio:

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

Tuliskan arahan v-model untuk setiap satu dan ikatkannya dengan sifat 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>

Berikan juga setiap satu value mereka sendiri:

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>

Sekarang dalam sifat choice akan sentiasa terdapat value daripada radio yang ditanda:

App.vue<template>
  anda memilih: {{ choice }}
</template>