Εργασία με radio στο Vue

Η εργασία με radio γίνεται με παρόμοιο τρόπο. Ας δούμε πρακτικά. Αρχικά, ας φτιάξουμε την ιδιότητα choice, την οποία θα δέσουμε σε μια ομάδα radio:

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

Ας φτιάξουμε τώρα μια ομάδα radio:

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

Ας γράψουμε σε καθένα από αυτά την οδηγία v-model και ας τα δέσουμε στην ιδιότητα 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>

Ας δώσουμε επίσης σε καθένα από αυτά το δικό του 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>

Τώρα στην ιδιότητα choice πάντα θα βρίσκεται το value του επιλεγμένου radio:

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