Vue'da Olay Üzerinden Form Verilerini Alma

Diyelim ki bir düğmemiz ve içine bir sayı girilen bir giriş alanımız var. Düğmeye tıklandığında, giriş alanına girilen sayının karesini alalım. Uygulamaya başlayalım.

Görevi çözmek için iki özelliğe ihtiyacımız olacak. num özelliği, giriş alanına veri girildikçe değişecek ve res özelliğine kuvvet alma işleminin sonucunu yazacağız:

data() {
	return {
		num: 0,
		res: 0
	}
}

Şimdi bir giriş alanı yapalım, ona num özelliğini bağlayalım, tıklandığında calc metodunun çalışacağı bir düğme yapalım ve ayrıca sonucun gösterileceği bir paragraf ekleyelim:

<template>
	<p>{{ res }}</p>
	<input v-model="num">
	<button v-on:click="calc">çalıştır</button>
</template>

Şimdi calc metodunun uygulamasını yazalım:

methods: {
	calc: function() {
		this.res = this.num ** 2;
	}
}

calc metodu çağrılır çağrılmaz (bu, düğmeye basıldığında gerçekleşecek), res özelliğine sonuç yazılacak ve aynı zamanda paragrafımızda gösterilecek.

Bir giriş alanı verilmiş. Bir düğme verilmiş. Bir paragraf verilmiş. Giriş alanına bir sayı giriliyor. Düğmeye tıklandığında paragrafta bu sayının karekökünün görünmesini sağlayın.

İki giriş alanı verilmiş. Bir düğme verilmiş. Bir paragraf verilmiş. Her giriş alanına sayılar giriliyor. Düğmeye tıklandığında paragrafta bu sayıların toplamının görünmesini sağlayın.

İki giriş alanı verilmiş. Bir düğme verilmiş. Her giriş alanına bir metin giriliyor. Düğmeye tıklandığında, birinci giriş alanındaki metin ikincide, ikinci giriş alanındaki metin ise birincide görünsün.

Bir giriş alanı, 3 paragraf ve bir düğme verilmiş. Giriş alanına kullanıcının Adı Soyadı aralarında boşluk olacak şekilde giriliyor. Düğmeye tıklandığında, birinci paragrafta kullanıcının soyadı, ikincisinde - adı, üçüncüsünde ise - baba adı görünsün.