Vue.js'de iki yönlü veri bağlama, genellikle v-model direktifi kullanılarak gerçekleştirilir. Bu yöntem, bir form elemanının değerini bir veriye bağlamak için kullanılır ve aynı zamanda bu veriyi form elemanının kullanıcının girdiği değerle güncellemesini sağlar. İşte bir örnek:
<template>
<div>
<input type="text" v-model="message">
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data(
) {
return {
message: '' // input alanının değeri bu veriye bağlanacak
}
}
}
</script>
Bu örnekte, bir text input alanı message verisine v-model direktifi ile bağlanmıştır. Bu sayede, kullanıcı bir şeyler yazdıkça, message verisi otomatik olarak güncellenir. Aynı şekilde, message verisi de değiştirildiğinde, input alanının değeri de otomatik olarak güncellenir.
v-model direktifi sadece form elemanları ile kullanılmaz. Aynı zamanda checkbox, radio, select gibi diğer form elemanlarıyla da kullanılabilir. Bu sayede, form elemanlarının değerleri Vue bileşeninde tanımlanan verilerle senkronize edilebilir. Bu özellik, form işlemlerinin ve kullanıcı girdilerinin yönetilmesini oldukça kolaylaştırır.