Legarea bidirecțională a datelor la input-uri în Vue

Acum vom învăța să lucrăm cu input-uri în framework-ul Vue. Cu ajutorul lor vom adăuga date în pagină în mod reactiv. Să începem. Să presupunem că avem un input:

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

Să presupunem că avem și o proprietate message:

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

Putem lega această proprietate și input-ul în așa fel, încât modificarea oricăruia dintre ele să ducă la modificarea celuilalt. Acest lucru se face cu ajutorul directivei v-model, în care se specifică proprietatea legată de input.

Să legăm de input-ul nostru proprietatea message:

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

După pornirea codului în input va fi textul proprietății message. Iar dacă edităm datele în input - proprietatea se va schimba în mod corespunzător. Pentru a vedea acest lucru, să afișăm conținutul introdus în input undeva într-un paragraf:

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