Obosmerné väzby dát na vstupy vo Vue

Teraz sa naučíme pracovať so vstupmi vo frameworku Vue. S ich pomocou budeme reaktívne pridávať dáta na stránku. Poďme na to. Predpokladajme, že máme vstup:

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

Predpokladajme tiež, že máme vlastnosť message:

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

Môžeme prepojiť túto vlastnosť a vstup tak, že zmena ktoréhokoľvek z nich povedie k zmene druhého. To sa robí pomocou direktívy v-model, v ktorej je uvedená vlastnosť viazaná na vstup.

Poďme naviazať na náš vstup vlastnosť message:

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

Po spustení kódu bude vo vstupe text vlastnosti message. A ak upravíte dáta vo vstupe - vlastnosť sa tiež zmení príslušným spôsobom. Aby sme to videli, poďme zobraziť obsah zadaný do vstupu niekde v odseku:

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