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

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.