Darbība ar checkbox Vue

Tagad apskatīsim, kā notiek darbība ar checkbox. Pieņemsim, ka mums ir šāds slēdzis:

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

Izveidosim īpašību checked, kas kontrolēs šī checkbox darbību:

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

Piesaistīsim šo īpašību caur v-model:

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

Ja checkbox ir atzīmēts - īpašībai checked būs vērtība true, bet ja nav atzīmēts - tad false. Lai par to pārliecinātos, var izvadīt īpašības vērtību uz ekrāna, šādi:

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

Ar ternārā operatora palīdzību var izvadīt kaut ko jēgpilnāku:

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