Rad sa checkbox u Vue

Hajde sada da pogledamo kako se radi sa checkbox. Pretpostavimo da imamo sledeći prekidač:

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

Napravimo svojstvo checked, koje će upravljati radom ovog checkbox:

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

Povežimo ovo svojstvo preko v-model:

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

Ako je checkbox označen - svojstvo checked će imati vrednost true, a ako nije označen - onda false. Da bismo se uverili u to, možemo prikazati vrednost svojstva na ekranu, ovako:

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

Pomoću ternarnog operatora možemo prikazati nešto značajnije:

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