Kétirányú adatkötés input mezőkhöz Vue-ban

Most megtanuljuk, hogyan dolgozzunk input mezőkkel a Vue keretrendszerben. Segítségükkel reaktívan fogunk adatokat hozzáadni az oldalhoz. Kezdjük is. Tegyük fel, hogy van egy input mezőnk:

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

Tegyük fel továbbá, hogy van egy message tulajdonságunk:

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

Összeköthetjük ezt a tulajdonságot és az input mezőt úgy, hogy bármelyik megváltoztatása a másik megváltoztatásához vezet. Ezt a v-model direktívával tehetjük meg, amelyben megadjuk az input mezőhöz kötött tulajdonságot.

Kössük hozzá az input mezőnkhöz a message tulajdonságot:

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

A kód indítása után az input mezőben a message tulajdonság szövege fog megjelenni. És ha szerkesztjük az input mező adatait - a tulajdonság is megváltozik ennek megfelelően. Hogy ezt lássuk, írjuk ki a beírt tartalmat valahol egy bekezdésben:

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