Darbība ar checkbox Vue

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

<template>
	<input type="checkbox">
</template>

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

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

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

<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:

<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:

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

Dots checkbox. Dots rindkopa. Ar direktīvas v-if palīdzību izdariet sekojošo: ja checkbox atzīmēts - rindkopa jāparāda, bet ja neatzīmēts - tad jāslēpj.