Filtry w VueJS – co to jest?
Filtry są to funkcje, które pozwalają nam na manipulowanie danymi tuż przed ich wyświetleniem. Zamieszczamy je w obiekcie filters
jako funkcje, gdzie jako parametr podajemy wartość, którą chcemy wyświetlić. Są to najzwyczajniejsze funkcje z JS jakie na co dzień piszemy.
Przykład użycia filtrów w VueJS
Filtry używamy poprzez dodanie ich do tak zwanych „wąsów” i oddzielenie go od zmiennej kreską pionową. Przykład poniżej:
{{category.count | polishGrammar}}
Jak widać nie jest to szczególnie skomplikowane 😉 .
Innym sposobem na wyświetlanie filtrów jest skorzystanie z v-bind. Przykład z dokumentacji:
v-bind:id="rawId | formatId"
Filtry możemy też „chainować”, czyli tworzyć łańcuchy filtrów, Tu również podaję przykład z dokumentacji:
{{ message | filterA | filterB }}
W łańcuchach filtr następny jako wartość pobiera wynik filtra poprzedniego.
Po więcej ciekawych informacji odsyłam do dokumentacji Vue.
Filtrowanie na moim blogu
Z racji, że mój blog jest polskojęzyczny, niezbędne okazały się polskie końcówki wyrazów. Chciałem, aby dynamicznie pokazująca się liczba wpisów przy kategorii miała przyporządkowany rzeczownik w odpowiedniej formie gramatycznej. Oczywiście mogłem zastosować zabieg: wpisy: 0
lub wpisy: 19
, ale to jest pójście na łatwiznę. Nie wygląda to ani estetycznie, ani profesjonalnie.
Jednakże póki co nie mamy zdefiniowane co nasz filtr ma robić. Jak już wspomniałem filtry definiujemy w obiekcie filters
jako funkcje.
filters: {
polishGrammar: function(value) {
if(value > 11 && value < 15) return `${value} wpisów`;
if(!((value-2)%10)||!((value-3)%10)||!((value-4)%10)) return `${value} wpisy`;
switch(value) {
case 0:
return `brak wpisów`;
break;
case 1:
return `${value} wpis`;
break;
default:
return `${value} wpisów`;
break;
}
}
}
W zależności od liczby wpisów Vue pokazuje nam odpowiednią końcówkę. Na przykład dla liczby 1293 będzie to wpisy
a dla 65 będzie to wpisów
. Są 3 przypadki specjalne, a mianowicie 0, które jest wyświetlane jako brak wpisów
, 1 jako liczba pojedyncza oraz 12, 13 i 14 jako liczby łapiące się w drugiego if’a lecz nie będące poprawną formą gramatyczną.
Innym przykładem filtrów może być przycięcie otrzymanego z API opisu do odpowiedniej długości. Taki filtr wykorzystuję chociażby w kafelkach na mojej stronie. Ten przykład już jest znacznie prostszy. Zresztą sam zobacz:
filters: {
sliceText: function(value, size) {
let desc = value.slice(3, size);
const length = desc.length;
for(let i = length; i>=0; i--) {
if(desc[i-1] === " ") {
desc = desc.slice(0, i-1);
if([',','.'].includes(desc[i-2])) desc = desc.slice(0, i-2);
return desc;
}
desc = desc.slice(0, i-1);
}
}
}
Metodę slice myślę, że każdy zna, więc nie będę jej szczegółowo opisywał. W razie wątpliwości odsyłam do MDN – moim zdaniem jednego z najlepszych źródeł wiedzy o JS. Link tutaj: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
Proszę napisz w komentarzu, czy filtry były Ci już wcześniej znane, a jeśli tak to w jaki sposób ich używałeś i czy okazały się dla Ciebie pomocne!
Zapisz się na mailing
Zapisując się na mój mailing będziesz otrzymywać wartościowe treści powiadomienia o najnowszych wpisach na skrzynkę email.