Práce s checkbox ve Vue

Pojďme se nyní podívat, jak probíhá práce s checkbox. Předpokládejme, že máme následující přepínač:

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

Vytvořme vlastnost checked, která bude řídit činnost tohoto checkbox:

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

Připojme tuto vlastnost pomocí v-model:

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

Pokud je checkbox zaškrtnut - vlastnost checked bude mít hodnotu true, a pokud není zaškrtnut - tak false. Abychom se o tom přesvědčili, můžeme vypsat hodnotu vlastnosti na obrazovku, takto:

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

S pomocí ternárního operátoru lze vypisovat něco smysluplnějšího:

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