Preuzimanje podataka iz forme preko događaja u Vue-u

Pretpostavimo da imamo dugme i input polje u koje se unosi broj. Hajde da pritiskom na dugme prikažemo kvadrat broja unetog u input. Pristupimo realizaciji.

Za rešavanje zadatka trebaće nam dve osobine. Osobina num će se menjati kako se podaci unose u input, a u osobinu res ćemo upisivati rezultat kvadriranja:

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

Hajde sada da napravimo input, povežemo ga sa osobinom num, napravimo dugme, čijim klikom će se izvršiti metoda calc, i napravimo takođe pasus u koji će biti ispisan rezultat:

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

Hajde da napišemo implementaciju metode calc:

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

Ispostavlja se da čim bude pozvana metoda calc (a to će se desiti pritiskom na dugme), u osobinu res biće upisan rezultat i istovremeno će se prikazati u našem pasusu.

Dat je input. Dat je button. Dat je pasus. U input se unosi broj. Uredite tako da pritiskom na dugme u pasusu se pojavi kvadratni koren tog broja.

Data su dva input polja. Dat je button. Dat je pasus. U svako input polje se unosi broj. Uredite tako da pritiskom na dugme u pasusu se pojavi zbir tih brojeva.

Data su dva input polja. Dat je button. U svako input polje se unosi neki tekst. Uredite tako da pritiskom na dugme tekst iz prvog input polja pređe u drugi i obrnuto.

Dat je input, 3 pasusa i button. U input se unosi puno ime korisnika kroz razmak. Uredite tako da pritiskom na dugme u prvom pasus se pojavi prezime korisnika, u drugom - ime, a u trećem - patronim.