Arbeid med checkbox i Vue

La oss nå se på hvordan arbeid med checkbox fungerer. La oss si at vi har følgende bryter:

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

La oss lage en egenskap checked, som vil styre arbeidet til denne checkbox:

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

La oss koble denne egenskapen via v-model:

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

Hvis checkbox er avmerket - vil egenskapen checked ha verdien true, og hvis den ikke er avmerket - så false. For å forsikre seg om dette, kan man vise verdien av egenskapen på skjermen, slik:

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

Ved hjelp av den ternære operatoren kan man vise noe mer meningsfylt:

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