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:

App.vue<template>
  <input>
</template>

Pretpostavimo takođe da imamo property message:

javascriptdata() {
  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:

App.vue<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:

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