Uvod

vue.js direktive

Korisničku akciju na view prosledjujemo aplikaciji sa direktivom “v-on:”, nakon obrade podataka radi ažuriranja korisničkog interfejsa prosledjujemo podake iz aplikacije interpolacijom ili direktivom v-bind. Svaki od navedenh pojedinačnih postupaka predstavlja prosledjivanja podataka u jednom smeru (eng. “one-way binding”). Medjutim polja za unos podataka su specifična, jer imaju potrebu za prosledjivanje podataka u oba smera (eng. “two-way binding”), stoga su na istom elementu potrebne obe direktive.
U narednom primeru se podaci iz forme prosledjuju data objektu sa “v-on:input” direktivom, dok se podaci izmenjeni iz same aplikacije ažuriraju vrednost u HTML inputu sa “v-bind:value” direktivom.

U okviru Vue.js postoji direktiva koja pokriva ovaj postupak pod nazivom “v-model”, sa čijim korišćenjem kod izgleda dosta jednostavnije, pa umesto:

koristimo pregledniju i jednostavniju sintaksu:

NAPOMENA:
Direktiva “v-model” će ignorisati početnu vrednost definisanu na nekom elementu forme (selektovanu i čekiranu), jer smatra “data” svojstvo kao glavni izvor. Stoga ukoliko želimo da deklarišemo početnu vrednost na nekom elementu forme, potrebno je da to uradimo, unutar “data” svojstva ili da povežemo vrednost sa direktivom “v-bind”.

See the Pen Inicijalno setovanje vrednosti inputa by Web programiranje (@chos) on CodePen.

Sintaksa

Direktiva v-model može da se koristi samo sa sledećim HTML elementima input, select, i textarea.

a) Textbox

b) Textarea

NAPOMENA:
Interpolacija kod “textarea” elementa <textarea>{{text}}</textarea> nije moguća

c) Checkbox

Single checkbox

Ako je u pitanju samo jedno chekcbox polje “v-model” direktiva će ga tretirati kao boolean-ovu vrednost, i ignisrisaće upisanu vrednost (u priemru: value=”foo”), stoga izbor može biti ili “true” ili “false”.

See the Pen v-model – single checkbox by Web programiranje (@chos) on CodePen.

Multiple checkbox

Ako imate više polja za potvrdu koji dele isti model, onda će ta polja popunjavati niz sa vrednostima svih potvrđenih polja, stoga obratite pažnju da “data” svojstvo bude definisano kao niz.

Primer

See the Pen V-model checkbox by Web programiranje (@chos) on CodePen.

d) Radio input

Primer

See the Pen V-model – radio by Web programiranje (@chos) on CodePen.

e) Select

Primer

Primer

Ukoliko je definisan višestruki izbor (multiple), onda je potrebno “data” svojstvo bude definisano kao niz:

Primer

See the Pen v-model za select by Web programiranje (@chos) on CodePen.

v-model modifiers

Modifikatori su posebne ključne reči koje na neki način utiču na unos. Postoje tri modifikatora koji se mogu koristiti sa ovom direktivom:

.trim

Kada koristimo ovaj modifier, u polju za unos će biti uklonjen bilo koji početni, krajnji, ili višestruki prazan prostor pre nego se vrednost sinhronizuje sa “data” svojstvom.

Primer

See the Pen Trim modifier by Web programiranje (@chos) on CodePen.

.lazy

Po defaultu, v-model se obradjuje svaki put kada se okine “keypress” input događaj. Ukoliko ne želimo da nam se unos preko input elementa automatski sinhronizuje sa “data” svojstvom pri svakom unetom karakteru, već da se sinhronizuje tek po završetku unosa (pritisnut Enter ili na neki drugi način izadjemo iz fokusa), onda je potrebno da koristimo modifier .lazy

.number

JavaScript tretira unešenu vrednost kroz “input” element tipa “text” kao “string”, stoga ukoliko radimo sa brojevima neophodno je da svaki unos kastujemo u “number”. Upravo nam ovaj modifikator osigurava da unos uvek bude automatski prebačen na broj, što bi bio ekvivalent pozivanju javascript funkcije “parseInt()”.

Primer

Ukoliko ne bi koristili ovaj modifikator dobio bi se nelogičan rezultat. Pa bi npr. kod unete vrednosti 5 za promenjuvu “a”, vrednost “b” bi bila 510, jer bi javascript izvršio konkatenaciju stringova umesto operacije sabiranja.

NAPOMENA:
Ukoliko se koristi input elemenat sa definisanim tipom “number” nije potrebno koristiti ovaj modifikator, jer Vue.js automatski kastuje u number.

Dinamičko vezivanje vrednosti

Kod radio dugmadi, checkbox-a i select-a se uglavnom koriste predefinisane vrednosti (string ili boolean), medjutm može da se javi potreba da se veže neka dinmička vrednost. U tom slučaju koristimo još i “v-bind” direktivu koja nam omogućava da vežemo input i za “non-string” vrednosti.

a) radio dugmad

Primer

See the Pen Dinamičko vezivanje radio by Web programiranje (@chos) on CodePen.

b) select

Podelite:

Ostavite komentar