Pobieranie danych formularza na podstawie zdarzenia w Vue

Załóżmy, że mamy przycisk i pole wprowadzania, do którego wpisywana jest liczba. Po naciśnięciu przycisku wyświetlmy kwadrat liczby wprowadzonej w pole. Przejdźmy do implementacji.

Aby rozwiązać zadanie, będziemy potrzebować dwóch właściwości. Właściwość num będzie zmieniać się podczas wprowadzania danych do pola, a do właściwości res będziemy zapisywać wynik podniesienia do kwadratu:

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

Stwórzmy teraz pole wprowadzania, powiążmy z nim właściwość num, stwórzmy przycisk, po kliknięciu którego będzie wykonywana metoda calc, a także stwórzmy akapit, do którego będzie wypisywany wynik:

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

Napiszmy implementację metody calc:

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

Okaże się, że jak tylko metoda calc zostanie wywołana (a stanie się to po naciśnięciu przycisku), do właściwości res zostanie zapisany wynik i jednocześnie wyświetli się w naszym akapicie.

Dane jest pole wprowadzania. Dany jest przycisk. Dany jest akapit. Do pola wprowadzania wpisywana jest liczba. Spraw, aby po naciśnięciu przycisku w akapicie pojawił się pierwiastek kwadratowy tej liczby.

Dane są dwa pola wprowadzania. Dany jest przycisk. Dany jest akapit. Do każdego pola wprowadzania wpisywane są liczby. Spraw, aby po naciśnięciu przycisku w akapicie pojawiła się suma tych liczb.

Dane są dwa pola wprowadzania. Dany jest przycisk. Do każdego pola wprowadzania wpisywany jest jakiś tekst. Spraw, aby po naciśnięciu przycisku tekst z pierwszego pola znalazł się w drugim i na odwrót.

Dane jest pole wprowadzania, 3 akapity i przycisk. Do pola wprowadzania wpisywane jest imię i nazwisko użytkownika oddzielone spacją. Spraw, aby po naciśnięciu przycisku w pierwszym akapicie pojawiło się nazwisko użytkownika, w drugim - imię, a w trzecim - drugie imię.