Λήψη δεδομένων φόρμας βάσει συμβάντος στο Vue

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

Για την επίλυση του προβλήματος, θα χρειαστούμε δύο ιδιότητες. Η ιδιότητα num θα αλλάζει καθώς εισάγονται δεδομένα στο πεδίο εισαγωγής, και στην ιδιότητα res θα καταγράφουμε το αποτέλεσμα της αύξησης στο τετράγωνο:

data() {
	return {
		num: 0,
		res: 0
	}
}

Ας δημιουργήσουμε τώρα το πεδίο εισαγωγής, ας το συνδέσουμε με την ιδιότητα num, ας φτιάξουμε ένα κουμπί, upon clicking on which the method will be executed calc, και ας φτιάξουμε επίσης μια παράγραφο, στην οποία θα εμφανίζεται το αποτέλεσμα:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">work</button>
</template>

Ας γράψουμε την υλοποίηση της μεθόδου calc:

methods: {
	calc: function() {
		this.res = this.num ** 2;
	}
}

Θα συμβεί ότι μόλις κληθεί η μέθοδος calc (και αυτό θα συμβεί με ένα κλικ στο κουμπί), στην ιδιότητα res θα καταγραφεί το αποτέλεσμα και ταυτόχρονα θα εμφανιστεί στην παράγραφό μας.

Δίνεται ένα πεδίο εισαγωγής. Δίνεται ένα κουμπί. Δίνεται μια παράγραφος. Στο πεδίο εισαγωγής εισάγεται ένας αριθμός. Κάντε έτσι ώστε με ένα κλικ στο κουμπί να εμφανίζεται στην παράγραφο η τετραγωνική ρίζα αυτού του αριθμού.

Δίνονται δύο πεδία εισαγωγής. Δίνεται ένα κουμπί. Δίνεται μια παράγραφος. Σε κάθε πεδίο εισαγωγής εισάγονται αριθμοί. Κάντε έτσι, ώστε με ένα κλικ στο κουμπί να εμφανίζεται στην παράγραφο το άθροισμα αυτών των αριθμών.

Δίνονται δύο πεδία εισαγωγής. Δίνεται ένα κουμπί. Σε κάθε πεδίο εισαγωγής εισάγεται κάποιο κείμενο. Κάντε έτσι ώστε με ένα κλικ στο κουμπί το κείμενο του πρώτου πεδίου εισαγωγής να εμφανίζεται στο δεύτερο και αντίστροφα.

Δίνεται ένα πεδίο εισαγωγής, 3 παράγραφοι και ένα κουμπί. Στο πεδίο εισαγωγής εισάγεται το Ονοματεπώνυμο του χρήστη διαχωρισμένο με κενό. Κάντε έτσι ώστε με ένα κλικ στο κουμπί στην πρώτη παράγραφο να εμφανίζεται το επώνυμο του χρήστη, στη δεύτερη - το όνομα, και στην τρίτη - το πατρώνυμο.