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.
<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:
<input v-on:input="cuvarVrednosti = $event.target.value" v-bind:value="cuvarVrednosti">
koristimo pregledniju i jednostavniju sintaksu:
<input v-model="cuvarVrednosti">