Vue.js Filtreler

Bu yazıda konuyu biraz daha detaylandırmaya çalışacağım.

Vue Filter

Vue v3.x ile birlikte filtreler artık kullanılmamakta, filtreler yerine computed properties kullanımı tavsiye edilmekte.

Vue v2.x içerisinde local ve global olarak filtreler oluşturabilmekte ve oluşturulan filtreleri mustache interpolations ve v-bind expressions içerisinde kullanabilmekteyiz. Bu arada, Vue’nun yayınlanan ilk sürümlerinde capitalize, lowercase, currency, pluralize, orderBy gibi ön tanımlı olarak oluşturulan filtreler de mevcutmuş¹ ve v1 ile² bu hazır filtreler kaldırılmış. Filtreler, önceki örneklerde de görülebileceği üzere pipe (|) ile entegre edilirler. Örneğin;

// mustache içerisinde filtre işlemi
{{ message | capitalize }}

// v-bind içerisinde filtre işlemi
<div v-bind:id="rawId | formatId"></div>

Kullanımın ardından, nasıl filtre oluşturabileceğimize bakalım ve örnek olarak, edindiğimiz string değerlere çeşitli işlemler uygulayalım.

// Vue v2.x
var app = new Vue({
  el: '#app',
  data:{
    titles: ['First Level', 'SECOND LeveL', 'ThIrD leVel', 'fourth level']
  }
});

// Vue v3.x
const app = Vue.createApp({
  data() {
    return {
      titles: ['First Level', 'SECOND LeveL', 'ThIrD leVel', 'fourth level']
    }
  }
});

titles: ['First Level', 'SECOND LeveL', 'ThIrD leVel', 'fourth level'] içeriğinde büyük-küçük harflerin bir arada kullanıldığını görüyoruz. Bu kullanımların hepsini tek bir formatta görüntülemek istediğimizi varsayalım ve sırasıyla şu işlemleri uygulayalım: Capitalize ilk harf büyük), UPPERCASE (tüm harfler büyük).

capitalize işlemi için oluşturu local filter oluşturacağım:

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString().toLowerCase()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Görüldüğü üzere pipe ile gönderilen değer (value) bir dizi işlemden geçirilip return ile döndürülüyor. Bu sayede pipe öncesindeki tanımlama işlenerek ilgili filtrenin çağırıldığı alana yansıtılıyor. Şimdi, filtre tanımlama işlemini bir de global olarak gerçekleştirelim:

Vue.filter('uppercase', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.toUpperCase()
});

Aynı konu global filter için de geçerli. Pipe ile çağırılmasının ardından pipe öncesindeki değeri işleyip yansıtmaktadır. Bu akış oldukça önemli. Çünkü, bu sayede birden fazla Vue filter kullanabilmekteyiz³. Yukarıda tanımladığımız filtreleri bir arada kullanmaya ne dersiniz?

{{ title | uppercase | capitalize }}

Çoklu filter kullanımında unutmamamız gereken, pipe ile önceki değerin bir değer olarak pipe sonrasına aktarılacağı. Yani, yukarıdaki kullanımda uppercase filtresi title değerlerine müdahale etmekte, capitalize ise uppercase filtresinden dönen sonuca müdahale etmekte.

Bir diğer hatırlatma da filtrelerin birer JavaScript fonksiyonu olmaları ve bu sayede argüman tanımlanabildiği.

{{ title | filterA('arg1', arg2) }}

Yukarıdaki argüman kullanımında title‘ın ilk argüman, arg1’in 2. ve arg2’nin de 3. argüman olduğunu unutmamalısınız.

Örnek Filtreler

Aşağıda, basit bir şekilde oluşturulmuş bazı filtreleri örnek olarak iletiyorum¹:

Reverse

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

Wrap

Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})

Daha farklı örnekler için How to Create Filters in Vue.js with Examples⁴ ve Using Filters to Format Data in Vue.js⁵ yazılarına da göz atabilirsiniz.