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

Ας δούμε τώρα πώς γίνεται η εργασία με checkbox. Ας υποθέσουμε ότι έχουμε την ακόλουθη επιλογή:

App.vue<template>
  <input type="checkbox">
</template>

Ας δημιουργήσουμε την ιδιότητα checked, που θα ελέγχει τη λειτουργία αυτού του checkbox:

javascriptdata() {
  return {
    checked: true,
  }
}

Ας δέσουμε αυτήν την ιδιότητα μέσω v-model:

App.vue<template>
  <input type="checkbox" v-model="checked">
</template>

Εάν το checkbox είναι επιλεγμένο - η ιδιότητα checked θα έχει την τιμή true, ενώ εάν δεν είναι επιλεγμένο - τότε false. Για να το επαληθεύσετε αυτό, μπορείτε να εμφανίσετε την τιμή της ιδιότητας στην οθόνη, έτσι:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked }}</p>
</template>

Χρησιμοποιώντας τον τριαδικό τελεστή μπορείτε να εμφανίσετε κάτι πιο ουσιαστικό:

App.vue<template>
  <input type="checkbox" v-model="checked">
  <p>{{ checked ? 'yes' : 'no' }}</p>
</template>