Werk met radio in Vue

Werk met radio geskied op 'n soortgelyke wyse. Kom ons kyk na dit in die praktyk. Laat ons eers die eienskap choice maak, waaraan ons sal bind aan 'n groep radio:

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

Kom ons maak nou 'n groep radio:

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

Skryf vir elkeen van hulle die direktief v-model en bind dit aan die eienskap 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>

Gee ook vir elkeen van hulle hul eie 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>

Nou sal in die eienskap choice altyd die value van die gemerkte radio wees:

App.vue<template>
  jy het gekies: {{ choice }}
</template>