Vue.JS Filter Metodu

Vue.js'de filter yöntemi, bir dizi veya nesne koleksiyonunu filtrelemek için kullanılır. Bu yöntem, veri dizilerini veya nesnelerini belirli bir koşula göre filtrelemek için kullanılabilir ve genellikle görüntülenen verileri düzenlemek veya filtrelemek için kullanılır. İşte bir örnek:

<template>
  <div>
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  data(
) {
    return {
      items: [
        { id: 1, name: 'Elma', category: 'Meyve' },
        { id: 2, name: 'Armut', category: 'Meyve' },
        { id: 3, name: 'Havuç', category: 'Sebze' },
        { id: 4, name: 'Domates', category: 'Sebze' },
      ],
      filterCategory: 'Meyve'
    }
  },
  computed: {
    filteredItems(
) {
      return this.items.filter(
item => item.category === this.filterCategory);
    }
  }
}

</script>

Bu örnekte, bir liste öğeleri koleksiyonunu filtrelemek için filter yöntemi kullanılmıştır. items adında bir dizi veri ve filterCategory adında bir filtre kategorisi bulunmaktadır. Ardından, filteredItems adında bir hesaplanan özellik oluşturulmuş ve bu özellik, items dizisini filter yöntemi kullanarak filtrelemektedir. Son olarak, v-for direktifi kullanılarak filtrelenmiş öğeler listelenmiştir.

Bu örnek, Vue.js'de filter yönteminin nasıl kullanılacağını basit bir şekilde göstermektedir. Bu yöntem, daha karmaşık filtreleme işlemleri için kullanılabilir ve veri görüntüleme ve işleme süreçlerini daha esnek hale getirmek için kullanılabilir.