Dvosmerno povezovanje podatkov z vnosi v Vue

Trenutno se bomo naučili dela z vnosi v ogrodju Vue. Z njihovo pomočjo bomo reaktivno dodajali podatke na stran. Pridimo k delu. Naj imamo vnos:

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

Naj imamo tudi lastnost message:

javascriptdata() {
  return {
    message: 'hello',
  }
}

To lastnost in vnos lahko povežemo tako, da sprememba katere koli od njiju povzroči spremembo druge. To naredimo z direktivo v-model, v kateri je navedena lastnost, povezana z vnosom.

Povežimo lastnost message z našim vnosom:

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

Po zagonu koda bo v vnosu besedilo lastnosti message. In če uredite podatke v vnosu - se bo lastnost ustrezno spremenila. Da bi to videli, izpišimo vsebino, vneseno v vnos, nekje v odstavku:

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