Εργασία με radio στο Vue

Η εργασία με radio γίνεται με παρόμοιο τρόπο. Ας δούμε πρακτικά. Αρχικά, ας φτιάξουμε την ιδιότητα 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>
	you choosed: {{ choice }}
</template>

Ρωτήστε τον χρήστη χρησιμοποιώντας μια ομάδα radio, ποια γλώσσα είναι η μητρική του. Κάντε έτσι ώστε η επιλεγμένη γλώσσα να εμφανιστεί σε μια παράγραφο

Τροποποιήστε την προηγούμενη εργασία ως εξής: ας υποθέσουμε ότι έχουμε τρεις παραγράφους με κείμενο σε διαφορετική γλώσσα. Ανάλογα με την επιλογή του χρήστη εμφανίστε τη φράση στη γλώσσα που επέλεξε.