Рад са 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 ? 'да' : 'не' }}</p>
</template>