Získávání dat z formuláře po události ve Vue

Předpokládejme, že máme tlačítko a vstupní pole, do kterého se zadává číslo. Po stisknutí tlačítka vypišme druhou mocninu čísla zadaného do vstupního pole. Pojďme se pustit do implementace.

K řešení úlohy budeme potřebovat dvě vlastnosti. Vlastnost num se bude měnit při zadávání dat do vstupního pole a do vlastnosti res budeme zapisovat výsledek umocnění na druhou:

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

Nyní vytvořme vstupní pole, přivažme k němu vlastnost num, vytvořme tlačítko, jehož kliknutím se spustí metoda calc, a vytvořme také odstavec, do kterého se bude vypisovat výsledek:

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

Napišme implementaci metody calc:

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

Výsledkem bude, že jakmile bude volána metoda calc (což se stane po stisknutí tlačítka), do vlastnosti res se zapíše výsledek a současně se zobrazí v našem odstavci.

Je dán vstup. Je dáno tlačítko. Je dán odstavec. Do vstupu se zadává číslo. Zařiďte, aby po stisknutí tlačítka se v odstavci objevila druhá odmocnina tohoto čísla.

Jsou dána dvě vstupní pole. Je dáno tlačítko. Je dán odstavec. Do každého vstupního pole se zadávají čísla. Zařiďte, aby po stisknutí tlačítka se v odstavci objevila součet těchto čísel.

Jsou dána dvě vstupní pole. Je dáno tlačítko. Do každého vstupního pole se zadává nějaký text. Zařiďte, aby po stisknutí tlačítka se text z prvního vstupního pole objevil ve druhém a naopak.

Je dán vstup, 3 odstavce a tlačítko. Do vstupu se zadává jméno a příjmení uživatele oddělené mezerou. Zařiďte, aby po stisknutí tlačítka se v prvním odstavci objevilo příjmení uživatele, ve druhém - jméno, a ve třetím - patronymum.