Travailler avec les radios dans Vue

Travailler avec les boutons radio se fait de manière similaire. Regardons cela en pratique. Pour commencer, créons une propriété choice que nous lierons à un groupe de boutons radio :

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

Créons maintenant un groupe de boutons radio :

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

Ajoutons à chacun d'eux la directive v-model et lions-la à la propriété 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>

Donnons également à chacun sa propre 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>

Maintenant, la propriété choice contiendra toujours la value du bouton radio sélectionné :

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

Demandez à l'utilisateur à l'aide d'un groupe de boutons radio quelle est sa langue maternelle. Faites en sorte que la langue choisie s'affiche dans un paragraphe.

Modifiez la tâche précédente de la manière suivante : supposons que nous ayons trois paragraphes avec du texte dans différentes langues. En fonction du choix de l'utilisateur, affichez la phrase dans la langue qu'il a choisie.