Liste Görselleştirme

`v-for`

Açıklama

v-for direktifini, bir diziye dayalı olarak bir liste ögesini oluşturmak için kullanabiliriz. v-for direktifi, item in items biçiminde özel bir sözdizimi gerektirir, burada items kaynak veri dizisi ve item geçiş yapılan dizi elemanı için bir takma addır.

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

v-for kapsamı içinde, şablon ifadeleri tüm üst kapsam özelliklerine erişim sağlar. Ayrıca, v-for mevcut öğenin indeksine karşılık gelen isteğe bağlı ikinci bir takma adı da destekler:

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

data() {
  return {
    parentMessage: 'Parent',
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

const parentMessage = 'Parent' const items = [{ message: 'Foo' }, { message: 'Bar' }]

{{ parentMessage }} - {{ index }} - {{ item.message }}

Denemek İçin Oynatma Alanında

v-for'un değişken kapsamı, aşağıdaki JavaScript'e benzer:

const parentMessage = 'Parent'
const items = [
  /* ... */
]

items.forEach((item, index) => {
  // dış kapsam `parentMessage`'e erişime sahiptir
  // ancak `item` ve `index` yalnızca burada kullanılabilir
  console.log(parentMessage, item.message, index)
})

Not: Görüldüğü gibi, v-for değeri forEach geri çağırma işlevinin imzasıyla eşleşiyor. Aslında, v-for öğe takma adı üzerinde yapılandırmayı benzer şekilde kullanabilirsiniz:

<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- indeks takma adı ile -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

İç içe v-for için, kapsam da iç içe fonksiyonlar gibi çalışır. Her v-for kapsamı, üst kapsam erişimine sahiptir:

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

Ayrıca in yerine of kullanarak ayırıcı olarak kullanabileceğiniz bir seçenek vardır, böylece JavaScript'in yineleyiciler için sözdizimine daha yakın olur:

<div v-for="item of items"></div>

`v-for` ile Obje

v-for'u bir nesnenin özelliklerini döngüye almak için de kullanabilirsiniz. Döngü sırası, nesne üzerindeki Object.values() çağrısının sonucuna dayalı olacaktır:

const myObject = reactive({
  title: 'Vue\'da listeler nasıl yapılır',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

data() {
  return {
    myObject: {
      title: 'Vue\'da listeler nasıl yapılır',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

Ayrıca, nesnenin adını (yaklaşık anahtar) karşılık gelen ikinci bir takma ad da sağlayabilirsiniz:

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

Ve bir indeks için başka bir takma ad:

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

Denemek İçin Oynatma Alanında

`v-for` ile Bir Aralık

v-for bir tam sayı da alabilir. Bu durumda, 1...n aralığına dayanarak şablonu bu kadar çok kez tekrarlayacaktır.

<span v-for="n in 10">{{ n }}</span>

Burada n, 0 yerine 1 başlangıç değeri ile başlar.

`v-for` ile ``

Şablon v-if'e benzer şekilde, birden fazla öğenin oluşturulması için v-for ile bir `` etiketi de kullanabilirsiniz. Örneğin:

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

`v-for` ile `v-if`

Not

v-if ve v-for'u aynı öğede kullanmak önerilmez çünkü örtük öncelik vardır. Daha fazla bilgi için stil kılavuzuna bakınız.

Aynı düğümde bulunduklarında, v-if'in v-for'dan daha yüksek bir önceliği vardır. Bu, v-if koşulunun v-for'un kapsamındaki değişkenlere erişemeyeceği anlamına gelir:

<!--
Bu, "todo" özelliği belirtilmediği için bir hata verecektir.
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

Bu, v-for'u sarıcı bir `` etiketine taşımakla (bu da daha açıktır) düzeltilir:

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

`key` ile Durumu Koruma

Vue, v-for ile oluşturulan bir öğeler listesini güncellerken, varsayılan olarak "yerinde tamir" stratejisi kullanır. Veri öğelerinin sırası değiştiğinde, Vue, öğelerin sırasını eşleştirmek için DOM öğelerini taşımak yerine, her öğeyi yerinde yamanız ve belirli bir indeksin ne şekilde oluşturulması gerektiğini yansıtması için güncellemektedir.

Bu varsayılan mod verimli olmasına rağmen, yalnızca listeniz oluşturma çıkışı çocuk bileşen durumuna veya geçici DOM durumuna (örneğin, form girdi değerleri) dayanmadığında uygundur.

Vue'ya her düğümün kimliğini izleyebileceği ve böylece mevcut öğeleri yeniden kullanabileceği ve sıralayabileceği bir ipucu vermek için, her seçenek için benzersiz bir key niteliği sağlamanız gerekir:

<div v-for="item in items" :key="item.id">
  <!-- içerik -->
</div>

kullanırken, `key`'in konteynerine yerleştirilmesi gerekir:

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

Not

key burada v-bind ile bağlanan özel bir niteliğidir. Bir nesne ile v-for kullanıldığında özelliği anahtar değişkeni ile karıştırılmamalıdır.

Önerilmektedir v-for ile mümkün olduğunda bir key niteliği sağlamak, iter edilen DOM içeriği basit (yani bileşen veya durum saklayan DOM öğesi içermiyor) olmadığında ya da varsayılan davranıştan performans kazançları için bilerek yararlanıyorsanız kolaydır.

key bağlaması, ilkel değerleri - yani dizeleri ve sayıları bekler. v-for anahtarları olarak nesneleri kullanmayın. key niteliğinin detaylı kullanımı için lütfen key API belgelerine` bakınız.

`v-for` ile Bir Bileşen

Bu bölüm Bileşenleri bilginiz olduğunu varsayar. Geçmekte özgürsünüz ve daha sonra geri dönebilirsiniz.

Bir bileşen üzerinde v-for'u, normal bir öğe gibi doğrudan kullanabilirsiniz (bir key sağlamayı unutmayın):

<MyComponent v-for="item in items" :key="item.id" />

Ancak bu, bileşene otomatik olarak herhangi bir veri geçirmez, çünkü bileşenlerin kendi izole kapsamları vardır. Geçiş yapılan verileri bileşene iletmek için, props kullanmalıyız:

<MyComponent
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
/>

Bileşene item verilmemesinin sebebi, bileşenin v-for'un işleyişine sıkı bağlı olmasını sağlamak içindir. Verinin nereden geldiği konusunda açıklık sağlamak, bileşenin başka durumlarda yeniden kullanılabilir olmasını sağlar.

Bu basit bir yapılacaklar listesi örneğine göz atabilirsiniz, bu sayede v-for kullanarak bileşenlerin nasıl oluşturulduğunu ve her örneğe farklı verilerin nasıl geçirileceğini görebilirsiniz.

Dizi Değişiklik Algılama

Değiştirme Yöntemleri

Vue, reaktif bir dizinin değişim yöntemlerinin çağrıldığını algılayabilir ve gerekli güncellemeleri tetikleyebilir. Bu değişim yöntemleri şunlardır:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

Bir Diziyi Değiştirme

Değiştirme yöntemleri, adından da anlaşılacağı gibi, çağrıldıkları orijinal diziyi değiştirir. Karşılaştırıldığında, filter(), concat() ve slice() gibi değişim yapmayan yöntemler vardır ve bu yöntemler mevcut diziyi değiştirmez, ancak her zaman yeni bir dizi döner. Değiştirmeyen yöntemlerle çalışırken, eski diziyi yeni dizi ile değiştirmemiz gerekir:

// `items` dizi değerine sahip bir referanstır
items.value = items.value.filter((item) => item.message.match(/Foo/))

this.items = this.items.filter((item) => item.message.match(/Foo/))

Bunun, Vue'nun mevcut DOM'u atmasına ve tüm listeyi yeniden oluşturmasına neden olacağını düşünebilirsiniz - neyse ki bu böyle değildir. Vue, DOM öğelerinin yeniden kullanımını maksimize etmek için bazı akıllı heuristikler uygular, bu nedenle, üst üste binen nesneleri içeren bir diziyi başka bir dizi ile değiştirmek çok verimli bir işlemdir.

Filtrelenmiş/Sıralanmış Sonuçları Gösterme

Bazen, orijinal veriyi gerçekten değiştirmeden veya sıfırlamadan bir dizinin filtrelenmiş veya sıralanmış bir versiyonunu göstermek isteriz. Bu durumda, filtrelenmiş veya sıralanmış diziyi döndüren bir hesaplanan özellik oluşturabilirsiniz.

Örneğin:

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() => {
  return numbers.value.filter((n) => n % 2 === 0)
})

data() {
  return {
    numbers: [1, 2, 3, 4, 5]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(n => n % 2 === 0)
  }
}

<li v-for="n in evenNumbers">{{ n }}</li>

Hesaplanan özelliklerin mümkün olmadığı durumlarda (örneğin iç içe v-for döngülerinde) bir yöntem kullanabilirsiniz:

const sets = ref([
  [1, 2, 3, 4, 5],
  [6, 7, 8, 9, 10]
])

function even(numbers) {
  return numbers.filter((number) => number % 2 === 0)
}

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

Hesaplanan bir özellikte reverse() ve sort() ile dikkatli olun! Bu iki yöntem, orijinal diziyi değiştirecektir, bu nedenle hesaplanan getterlarda kaçınılmalıdır. Bu yöntemleri çağırmadan önce orijinal dizinin bir kopyasını oluşturun:

- return numbers.reverse()
+ return [...numbers].reverse()