Lidhja e dyanshme e të dhënave me inputet në Vue

Tani do të mësojmë të punojmë me inputet në framework-un Vue. Me ndihmën e tyre do të shtojmë të dhëna në mënyrë reaktive në faqe. Le të fillojmë. Le të kemi një input:

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

Le të kemi gjithashtu një pronë message:

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

Ne mund ta lidhim këtë pronë dhe inputin në mënyrë të tillë që ndryshimi i cilësdo prej tyre të çojë në ndryshimin e tjetrit. Kjo bëhet me ndihmën e direktivës v-model, ku specifikohet pronë e lidhur me inputin.

Le ta lidhim me inputin tonë pronën message:

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

Pas nisjes së kodit në input do të jetë teksti i pronës message. Dhe nëse redaktohen të dhënat në input - pronë do të ndryshojë gjithashtu në mënyrën përkatëse. Për ta parë këtë, le të shfaqim përmbajtjen e futur në input diku në një paragraf:

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