Rad sa radio dugmadima u Vue

Rad sa radio dugadima se odvija na sličan način. Hajde da pogledamo u praksi. Za početak, napravićemo svojstvo choice, koje ćemo vezati za grupu radio dugmadi:

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

Sada napravimo grupu radio dugmadi:

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

Svakom od njih dodelimo direktivu v-model i povežimo je sa svojstvom 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>

Takođe dodelimo svakom svoju 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>

Sada će u svojstvu choice uvek biti vrednost value označenog radio dugmeta:

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