Vue.js ile form elemanlarından dinamik veri çekme

Sezai AlkanFrontend Developer

Vue.js #vue-js #v-model #input

Vue.js ile form elemanlarından v-model ile veriyi iki yönlü olarak bind işlemi sağlayabilmekteyiz. v-model kullanımında vue.js içerisinde oluşturduğumuz değişken ile veriyi işleyebilir veya anlık olarak çekebiliriz.

<template>
	<div>
   		<input type="text" v-model="yakala">
   		<label>{{yakala}}</label>
  	</div> 
</template>

Yukarıda template içerisinde oluşturduğumuz örnek textbox'a v-model attribute ile Vue.js tarafında oluşturduğumuz yakala değişkenini tanımladık.

<script>
	export default {
		data(){
			return {
				yakala : 'Buraya Yazılanı yakalarım', 
			}
		}
	}
</script>

Yukarıda ise Vue.Js tarafından oluşturmamız gereken script kodlarımız bulunmaktadır. Değişken tanımlarken değişkenimize bir değer tanımlar isek bu değer projemiz çalıştığında varsayılan olarak input içerisine yazılacaktır.

 Bu örnek içerisinde anlık kullanıcı tarafından girilen değer label içerisine yazılacaktır.

 v-model kullanımı ek olarak checkbox, selectbox vb. gibi html elemanları üzerinde de kullanım sağlayabilirsiniz.