Vue.Js v-for ile index numarası alma

Sezai AlkanFrontend Developer

Vue.js #vue-js #v-for

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.