Delo s checkbox v Vue

Poglejmo si zdaj, kako poteka delo z checkbox. Recimo, da imamo naslednje stikalo:

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

Ustvarimo lastnost checked, ki bo upravljala z delovanjem tega checkbox:

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

Povežimo to lastnost prek v-model:

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

Če je checkbox označen - bo lastnost checked imela vrednost true, če pa ni označen - pa false. Da se prepričamo v tem, lahko izpišemo vrednost lastnosti na zaslon, takole:

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

S pomočjo ternarnega operatorja lahko izpišemo kaj bolj smiselnega:

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