Dvosmerno povezivanje podataka sa input poljima u Vue

Sada ćemo naučiti rad sa input poljima u Vue framework-u. Pomoću njih ćemo reaktivno dodavati podatke na stranicu. Hajde da počnemo. Pretpostavimo da imamo input polje:

<template>
	<input>
</template>

Pretpostavimo takođe da imamo property message:

data() {
	return {
		message: 'hello',
	}
}

Možemo povezati ovaj property i input polje na takav način da promena bilo kog od njih dovodi do promene drugog. Ovo se postiže pomoću directive v-model, u kojoj se navodi property koji je vezan za input polje.

Hajde da povežemo naše input polje sa property-jem message:

<template>
	<input v-model="message">
</template>

Nakon pokretanja koda u input polju će se nalaziti tekst property-ja message. A ako izmenite podatke u input polju - property će se takođe promeniti na odgovarajući način. Da biste ovo videli, hajde da prikažemo sadržaj unet u input polje negde u paragrafu:

<template>
	<input v-model="message">
	<p>{{ message }}</p>
</template>

Dat je input. Učinite da se tekst koji se unosi u input polje odmah prikazuje u paragrafu ispod njega.

Modifikujte prethodni zadatak tako da se tekst prikazuje u gornjem registru.

Dat je input. Pretpostavimo da se u njega unosi broj. Učinite da se u paragrafu tokom unosa prikazuje kvadrat unetog broja.