A checkbox kezelése Vue-ban

Nézzük meg most, hogyan történik a checkbox kezelése. Tegyük fel, hogy van a következő kapcsolónk:

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

Készítsünk egy checked tulajdonságot, amely irányítja ennek a checkboxnak a működését:

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

Kössük ezt a tulajdonságot a v-model segítségével:

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

Ha a checkbox be van jelölve - a checked tulajdonság értéke true lesz, ha nincs bejelölve - akkor false. Hogy ezt megbizonyosodjunk róla, kiírhatjuk a tulajdonság értékét a képernyőre, így:

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

A ternális operátor segítségével kiírhatunk valami értelmesebbet:

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