Získavanie údajov z formulára podľa udalosti vo Vue

Predpokladajme, že máme tlačidlo a vstupné pole, do ktorého sa zadáva číslo. Po stlačení tlačidla vypíšme druhú mocninu čísla zadaného do vstupného poľa. Poďme sa pustiť do implementácie.

Na vyriešenie úlohy budeme potrebovať dve vlastnosti. Vlastnosť num sa bude meniť počas zadávania údajov do vstupného poľa a do vlastnosti res budeme zapisovať výsledok umocnenia na druhú:

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

Teraz vytvorme vstupné pole, pripojme k nemu vlastnosť num, vytvorme tlačidlo, na ktoré po kliknutí sa vykoná metóda calc, a vytvorme tiež odsek, do ktorého sa bude vypisovať výsledok:

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

Poďme napísať implementáciu metódy calc:

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

Výsledkom bude, že akonáhle sa zavolá metóda calc (čo sa stane po stlačení tlačidla), do vlastnosti res sa zapíše výsledok a zároveň sa zobrazí v našom odseku.

Dané je vstupné pole. Dané je tlačidlo. Daný je odsek. Do vstupného poľa sa zadáva číslo. Urobte tak, aby po stlačení tlačidla sa v odseku objavila druhá odmocnina tohto čísla.

Dané sú dve vstupné polia. Dané je tlačidlo. Daný je odsek. Do každého vstupného poľa sa zadávajú čísla. Urobte tak, aby po stlačení tlačidla sa v odseku objavil súčet týchto čísel.

Dané sú dve vstupné polia. Dané je tlačidlo. Do každého vstupného poľa sa zadáva nejaký text. Urobte tak, aby po stlačení tlačidla sa text z prvého vstupného poľa objavil v druhom a naopak.

Dané je vstupné pole, 3 odseky a tlačidlo. Do vstupného poľa sa zadáva celé meno používateľa medzerou oddelené. Urobte tak, aby po stlačení tlačidla v prvom odseku sa objavilo priezvisko používateľa, v druhom - krstné meno a v treťom - stredné meno.