Darbība ar radio Vue

Darbība ar radio notiek līdzīgā veidā. Apskatīsim to praktiski. Vispirms izveidosim īpašību choice, ko mēs piesaistīsim radio grupai:

data() {
	return {
		choice: '',
	}
}

Tagad izveidosim radio grupu:

<template>
	<input name="radio" type="radio">
	<input name="radio" type="radio">
	<input name="radio" type="radio">
</template>

Katram no tiem pievienosim direktīvu v-model un piesaistīsim to īpašībai choice:

<template>
	<input name="radio" type="radio" v-model="choice">
	<input name="radio" type="radio" v-model="choice">
	<input name="radio" type="radio" v-model="choice">
</template>

Katram no tiem piešķirsim arī savu value:

<template>
	<input name="radio" type="radio" v-model="choice" value="v1">
	<input name="radio" type="radio" v-model="choice" value="v2">
	<input name="radio" type="radio" v-model="choice" value="v3">
</template>

Tagad īpašībā choice vienmēr atradīsies atzīmētā radio value:

<template>
	you choosed: {{ choice }}
</template>

Izmantojot radio grupu, jautājiet lietotājam, kura valoda viņam ir dzimtā. Iestatiet tā, lai izvēlētā valoda tiktu parādīta rindkopā

Modificējiet iepriekšējo uzdevumu sekojoši: lai mums ir trīs rindkopas ar tekstu dažādās valodās. Atkarībā no lietotāja izvēles, parādiet frāzi viņa izvēlētajā valodā.