Delo z radio v Vue

Delo z radio poteka na podoben način. Poglejmo si v praksi. Za začetek ustvarimo lastnost choice, ki jo bomo vezali na skupino radio:

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

Ustvarimo zdaj skupino radio:

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

Vsakemu od njih napišimo direktivo v-model in jo povežimo z lastnostjo 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>

Dajmo tudi vsakemu od njih svojo vrednost 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>

Zdaj bo v lastnosti choice vedno nahajala vrednost value označenega radio:

App.vue<template>
  izbrali ste: {{ choice }}
</template>