Vue හි රේඩියෝ සමඟ වැඩ කිරීම

රේඩියෝ සමඟ වැඩ කිරීම ද සමාන ආකාරයකින් සිදු කෙරේ. අපි ප්‍රායෝගිකව බලමු. පළමුව, අපි ගුණාංගයක් සාදමු choice, එය අපි radio කණ්ඩායමකට බැඳිය යුතුය:

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

දැන් අපි radio කණ්ඩායමක් සාදමු:

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

ඒ එක් එක් සඳහා v-model නියෝගය ලියන්න සහ එය ගුණාංගයට බන්ධනය කරන්න 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>

ඒ එක් එක්ට තමන්ගේම 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>

දැන් ගුණාංගයේ choice සැමවිටම තබා ගනු ඇත value තේරූ radio හි:

<template>
	ඔබ තෝරා ගත්තේ: {{ choice }}
</template>

radio කණ්ඩායමක් භාවිතා කරමින් පරිශීලකයාගෙන් විමසන්න, කුමන භාෂාව ඔහුගේ මව් බසද යන්න. එසේ කරන්න තෝරාගත් භාෂාව ඡේදයෙහි දිස්වේ

පෙර කාර්යය පහත පරිදි වෙනස් කරන්න පරිදි: අපට විවිධ භාෂාවලින් පෙළ සහිත ඡේද තුනක් ඇතැයි සිතමු. පරිශීලකයා තෝරා ගත් අනුව ඔහු තෝරාගත් භාෂාවෙන් වාක්‍ය ඛණ්ඩය පෙන්වන්න.