Uvod
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="app" <input v-on:input="cuvarVrednosti = $event.target.value" v-bind:value="cuvarVrednosti"> </div> <script> new Vue({ el: '#app', data: { cuvarVrednosti: 'neki tekst' } methods: { reset(){ cuvarVrednosti = ''; } } }) </script> |
U okviru Vue.js postoji direktiva koja pokriva ovaj postupak pod nazivom “v-model”, sa čijim korišćenjem kod izgleda dosta jednostavnije, pa umesto:
1 |
<input v-on:input="cuvarVrednosti = $event.target.value" v-bind:value="cuvarVrednosti"> |
koristimo pregledniju i jednostavniju sintaksu:
1 |
<input v-model="cuvarVrednosti"> |
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
1 |
<input v-model="message" placeholder="edit me"> |
b) Textarea
1 |
<textarea v-model="message" placeholder="add multiple lines"></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
1 |
<input type="radio" id="mika" value="Mika" v-model="izabranRadnik"> |
Primer
See the Pen V-model – radio by Web programiranje (@chos) on CodePen.
e) Select
Primer
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<select v-model="izbor"> <option disabled value="">Izaberite jednu opciju</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Izabrali ste: {{ izbor }}</span> <script> new Vue({ el: '...', data: { izbor: '' } }) </script> |
Primer
Ukoliko je definisan višestruki izbor (multiple), onda je potrebno “data” svojstvo bude definisano kao niz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<select v-model="izbor" multiple> <option>A</option> <option>B</option> <option>C</option> </select> <span>{{ izbor }}</span> <span>Selected: {{ izbor }}</span> <script> new Vue({ el: '#app', data: { izbor: [] } }) </script> |
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.
1 |
<input type="text" v-model.trim="name"> |
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
1 |
<input type="text" v-model.lazy="poruka"> |
.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="app"> <input v-model.number="a"> <p>Promenjiva "b" je uvek veća za 10 veća od unosa i iznosi: {{ b }}</p> </div> <script type="text/javascript"> new Vue({ el: '#app', data: { a: 1, }, computed: { b: function () { return this.a + 10 } } } </script> |
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
1 2 3 |
<input type="radio" v-model="pick" v-bind:value="a"> // when checked: vm.pick === vm.a |
Primer
See the Pen Dinamičko vezivanje radio by Web programiranje (@chos) on CodePen.
b) select
1 2 3 4 5 6 7 8 |
<select v-model="selected"> <!-- inline object literal --> <option v-bind:value="{ number: 123 }">123</option> </select> // when selected: typeof vm.selected // => 'object' vm.selected.number // => 123 |