Filtry VueJS - okładka

Filtry VueJS – praktyczne zastosowania

Opublikowano Kategorie Frontend, JavaScriptCzas czytania 3min

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

Dominik Szczepaniak

Zawodowo Senior Software Engineer w CKSource. Prywatnie bloger, fan włoskiej kuchni, miłośnik jazdy na rowerze i treningu siłowego.

Inne wpisy, które mogą Cię zainteresować

Zapisz się na mailing i odbierz e-booka

Zapisując się na mój mailing, otrzymasz darmowy egzemplarz e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer! Będziesz też otrzymywać wartościowe treści i powiadomienia o nowych wpisach na skrzynkę e-mail.

Subscribe
Powiadom o
guest

0 komentarzy
Inline Feedbacks
View all comments