Vue'da Inputlara Çift Yönlü Veri Bağlama

Şimdi Vue framework'ünde inputlarla çalışmayı öğreneceğiz. Onların yardımıyla sayfaya reaktif olarak veri ekleyeceğiz. Hadi başlayalım. Bir inputumuz olduğunu varsayalım:

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

Ayrıca bir message özelliğimiz olduğunu varsayalım:

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

Bu özelliği ve inputu, herhangi birindeki değişikliğin diğerinin de değişmesine yol açacağı şekilde bağlayabiliriz. Bu, inputa bağlanan özelliğin belirtildiği v-model direktifi kullanılarak yapılır.

Hadi inputumuzu message özelliğine bağlayalım:

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

Kod çalıştırıldıktan sonra inputta message özelliğinin metni olacak. Ve eğer inputtaki veriler düzenlenirse - özellik de buna uygun şekilde değişecek. Bunu görmek için, hadi inputa girilen içeriği bir paragrafta bir yerde gösterelim:

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