Pridobivanje podatkov obrazca po dogodku v Vue

Recimo, da imamo gumb in vnosno polje, v katerega vnesemo številko. Ob pritisku na gumb izpišimo kvadrat vnesene številke v vnosno polje. Lotimo se izvedbe.

Za rešitev problema bomo potrebovali dve lastnosti. Lastnost num se bo spreminjala med vnosom podatkov v vnosno polje, v lastnost res pa bomo zapisali rezultat kvadriranja:

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

Zdaj naredimo vnosno polje, povežimo z njim lastnost num, naredimo gumb, ob kliku na katerega bo izvedena metoda calc, in naredimo tudi odstavek, v katerega bo izpisan rezultat:

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

Zdaj napišimo implementacijo metode calc:

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

Izkazalo se bo, da takoj ko bo klicana metoda calc (kar se bo zgodilo ob pritisku na gumb), bo v lastnost res zapisan rezultat in se bo hkrati prikazal v našem odstavku.

Podano je vnosno polje. Podan je gumb. Podan je odstavek. V vnosno polje je vnesena številka. Naredite tako, da se ob pritisku na gumb v odstavku prikaže kvadratni koren te številke.

Podani sta dve vnosni polji. Podan je gumb. Podan je odstavek. V vsako vnosno polje so vnesene številke. Naredite tako, da se ob pritisku na gumb v odstavku prikaže vsota teh števil.

Podani sta dve vnosni polji. Podan je gumb. V vsako vnosno polje je vneseno besedilo. Naredite tako, da ob pritisku na gumb besedilo prvega vnosnega polja preide v drugo in obratno.

Podano je vnosno polje, 3 odstavki in gumb. V vnosno polje je vneseno ime in priimek uporabnika, ločeno s presledkom. Naredite tako, da se ob pritisku na gumb v prvem odstavku prikaže priimek uporabnika, v drugem - ime, v tretjem pa srednje ime.