Arbeid med radio i Vue

Arbeid med radio skjer på en tilsvarende måte. La oss se praksis. Til å begynne med, la oss lage en egenskap choice som vi vil binde til en gruppe radio:

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

La oss nå lage en gruppe radio:

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

La oss skrive direktivet v-model for hver av dem og bind den til egenskapen 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>

La oss også gi hver av dem sin egen 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>

Nå vil value fra den merkede radio alltid ligge i egenskapen choice:

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