Checkboxin käsittely Vuesa

Katsotaan nyt, miten checkbox:n kanssa työskennellään. Oletetaan, että meillä on seuraava kytkin:

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

Luodaan ominaisuus checked, joka hallinnoi tämän checkbox:n toimintaa:

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

Yhdistetään tämä ominaisuus v-model:n avulla:

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

Jos checkbox on valittu - ominaisuuden checked arvo on true, ja jos ei ole valittu - niin false. Varmistaaksesi tämän voidaan tulostaa ominaisuuden arvo näytölle, näin:

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

Ternäärioperaattoria käyttäen voidaan tulostaa jotain mielekkäämpää:

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