Преузимање података форме по догађају у Vue

Претпоставимо да имамо дугме и уносни поље, у које се уноси број. Хајде да при клику на дугме изађемо квадрат унетог броја у уносном пољу. Приступимо имплементацији.

За решавање задатка биће нам потребна два својства. Својство num ће се мењати током уноса података у уносни поље, а у својство res ћемо уписати резултат квадрирања:

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

Хајде сада да направимо уносни поље, вежимо га за својство num, направимо дугме, по клику на које ће се извршити метод calc, и направимо такође пасус, у који ће се исписати резултат:

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

Хајде да напишемо имплементацију метода calc:

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

Добија се да чим се позове метод calc (а то ће се догодити притиском на дугме), у својство res уписаће се резултат и при томе истовремено ће се приказати у нашем пасусу.

Дато је уносни поље. Дато је дугме. Дат је пасус. У уносни поље се уноси број. Направите тако да при притиску на дугме у пасусу се појави квадратни корен тог броја.

Дата су два уносна поља. Дато је дугме. Дат је пасус. У свако уносни поље се уносе бројеви. Направите тако, да при притиску на дугме у пасусу се појави збир тих бројева.

Дата су два уносна поља. Дато је дугме. У свако уносни поље се уноси неки текст. Направите тако да при притиску на дугме текст првог уносног поља буде у другом и обрнуто.

Дато је уносни поље, 3 пасуса и дугме. У уносни поље се уноси пуно име и презиме корисника раздвојено размаком. Направите тако да при притиску на дугме у првом пасусу се појави презиме корисника, у другом - име, а у трећем - средње име.