Vue.Js v-for ile index numarası alma

sezaialkan
Sezai Alkan Frontend Developer

Vue.js v-for kullanımında dizi içerisinden gelen veriye ait indis numarasını v-for içerisinde özel tanımlama ile alabilmekteyiz. Vue.js tarafında indis numarasını elde edebilmemiz için gelen değer ile birlikte indis değişkenimizi aktaracağımız değişkenleri parantez içerisine alarak kullanmamız gereklidir.

Kullanımı : v-for="(e, indis) in dizidegiskeni"

Parantez içerisinde değişken konumu olarak ilk olarak gelen değerin alacağı değişkeni yazmamız ikinci olarak ise indis değerini aktaracağımız değişken ismini yazmamız gereklidir.

<div id="app">
	<ul>
		<li v-for="(event, index) in simple">{{ event }} - {{ index }}</li>
	</ul>
</div>
new Vue({
	el : "#app",
	data : {
		simple : ["Seat", "Leon", "İbiza", "Cupra"]
	}
})

Yukarıdaki örnekte Parantez içerisinde kendi belirlediğimiz özel değişkenlere dizi içerisinden gelen her bir değer ve değere ait indis numarasını aktarmaktayız. Örnek üzerinde kullanmış olduğumuz değişken isimleri kullanımınıza göre özel olarak yapılandırabilmektesiniz.

Yukarıdaki örneğin ekran çıktısı aşağıdaki gibidir.

Vue.Js v-for ile index numarası alma

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol