Filtry w VueJS to funkcje, które pozwalają na manipulowanie danymi tuż przed ich wyświetleniem. Zamieszcza się je w obiekcie filters jako funkcje, gdzie jako parametr podaje się wartość, którą chcemy wyświetlić.

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ą.

{{category.count | polishGrammar}}

Innym sposobem na wyświetlanie filtrów jest skorzystanie z v-bind.

v-bind:id="rawId | formatId"

Filtry możemy też „chainować”, czyli tworzyć łańcuchy filtrów.

{{ 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 (starym) blogu*

Z racji, że mój blog jest polskojęzyczny, niezbędne okazały się polskie końcówki wyrazów w szablonie. Chciałem, by 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 nie podobało mi się takie rozwiązanie.

Poniżej przedstawiam przykład rozwiązania, jakie wykorzystałem.

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ą trzy przypadki specjalne –  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 wykorzystania filtrów może być przycięcie otrzymanego z API opisu do odpowiedniej długości. Taki filtr wykorzystywałem w komponencie kafelka z zajawką artykułu. Ten przykład już jest znacznie prostszy.

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. Daj znać 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.

*Artykuł pochodzi z czasów, gdy blog zbudowany był z wykorzystaniem VueJS. Obecnie wykorzstuję własny szablon WordPress-a.

Zaobserwuj mnie na LinkedIn!

LinkedIn jest głównym medium, poza blogiem, gdzie publikuję swoje przemyślenia. Zaobserwuj mój profil na LinkedIn, by być na bieżąco!
Zachęcam też do zaobserwowania devszczepaniak.pl na Facebooku, gdzie oprócz informacji o nowych artykułach publikuję linki do ciekawych treści.

Udostępnij wpis

Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!

📖 Koniecznie sprawdź ofertę księgarni Helion oferującej tysiące książek dla programistów w dobrych cenach! Kupując z tego linku, pomagasz w rozwoju bloga.

Chcesz docenić moją pracę? Postaw mi kawę!