Polskie końcówki w oparciu o filtry VueJS

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!