მონაცემთა ორმხრივი მიბმა ინპუტებზე 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>