Adatok lekérése űrlap esemény alapján Vue-ban

Tegyük fel, hogy van egy gombunk és egy input mezőnk, amibe egy számot írunk. A gomb megnyomásakor írjuk ki a beírt szám négyzetét. Kezdjük el a megvalósítást.

A feladat megoldásához két adatproperty-re lesz szükségünk. A num property a bemeneti adatok bevitelével változik, míg a res property-be mi fogjuk beírni a négyzetre emelés eredményét:

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

Most készítsük el az input mezőt, kössük hozzá a num property-t, készítsünk egy gombot, amire kattintva a calc metódus fog lefutni, és készítsünk egy bekezdést is, amibe kiírjuk az eredményt:

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

Írjuk meg a calc metódus megvalósítását:

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

Az eredmény az lesz, hogy amint a calc metódus meg lesz hívva (ez a gomb megnyomásakor történik meg), a res property-be bekerül az eredmény, ami egyben meg is jelenik a bekezdésünkben.

Adott egy input mező. Adott egy gomb. Adott egy bekezdés. Az input mezőbe egy számot írunk. Állítsa be úgy, hogy a gombra kattintáskor a bekezdésben megjelenjen a szám négyzetgyöke.

Adott két input mező. Adott egy gomb. Adott egy bekezdés. Mindegyik input mezőbe számokat írunk. Állítsa be úgy, hogy a gomb megnyomásakor a bekezdésben megjelenjen ezen számok összege.

Adott két input mező. Adott egy gomb. Mindegyik input mezőbe valamilyen szöveget írunk. Állítsa be úgy, hogy a gomb megnyomásakor az első input mező szövege kerüljön a másodikba és fordítva.

Adott egy input mező, 3 bekezdés és egy gomb. Az input mezőbe a felhasználó teljes nevét írjuk be szóközzel elválasztva. Állítsa be úgy, hogy a gomb megnyomásakor az első bekezdésben megjelenjen a felhasználó vezetékneve, a másodikban - a keresztneve, a harmadikban pedig - a beceneve.