Vue-ում տվյալների երկկողմանի կապում մուտքագրման դաշտերի հետ

Այժմ մենք կսովորենք աշխատել մուտքագրման դաշտերի հետ Vue-ի ֆրեյմվորքում: Դրանց օգնությամբ մենք ռեակտիվ կերպով կավելացնենք տվյալներ էջում: Եկեք սկսենք: Ենթադրենք, մենք ունենք մուտքագրման դաշտ:

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

Ենթադրենք նաև, որ մենք ունենք message հատկությունը:

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

Մենք կարող ենք կապել այս հատկությունը և մուտքագրման դաշտն այնպես, որ դրանցից որևէ մեկի փոփոխությունը հանգեցնի մյուսի փոփոխության: Դա արվում է v-model դիրեկտիվի միջոցով, որտեղ նշվում է մուտքագրման դաշտին կապված հատկությունը:

Եկեք կապենք մեր մուտքագրման դաշտին message հատկությունը:

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

Կոդը գործարկելուց հետո մուտքագրման դաշտում կլինի message հատկության տեքստը: Իսկ եթե խմբագրել մուտքագրման դաշտի տվյալները, ապա հատկությունը նույնպես կփոխվի համապատասխան կերպով: Սա տեսնելու համար եկեք արտածենք մուտքագրման դաշտում մուտքագրված պարունակությունը ինչ-որ տեղ պարբերությունում:

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