v-model Archives | Web Programiranje

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.

<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>

<div id="app"

</div>

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">

1	<input v-on:input="cuvarVrednosti = $event.target.value" v-bind:value="cuvarVrednosti">

koristimo pregledniju i jednostavniju sintaksu:

<input v-model="cuvarVrednosti">

1	<input v-model="cuvarVrednosti">