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>