Vue 2 filtry

W artykule zapoznamy się z filtrami w VueJS. Jeśli nie znasz podstaw Vue warto przeczytać wstęp do Vue 2. Jak sama nazwa wskazuje, filtry są narzędziami do prezentacji danych używanymi do filtrowania danych na poziomie DOM. Używa się ich zazwyczaj do zmian w wyświetlaniu pobranych danych.

Do dzieła. Zobaczmy strukturę pierwszego filtra (capitalize). Jak się pewnie domyślasz będzie on formatował tekst wyświetlając pierwszą literę jako wielką.

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

Filtr zawsze ma funkcję, funkcja filtru zawsze przyjmuje wartość wyrażenia (wynik poprzedniego ciągu znaków) jako pierwszy argument. Jak użyć filtra w kodzie? To bardzo proste, piszemy znak | i dalej nazwę filtra. Spójrz na przykład poniżej.

{{ first_name | capitalize }}

Istnieją dwa sposoby określania zasięgu filtra - lokalny oraz globalny. Filtry lokalne to typy filtrów przypisanych do konkretnego komponentu, w którym są zdefiniowane. Powyższa składnia dotyczyła filtru lokalnego. Filtry globalne to filtry, które określasz w instancji aplikacji Vue, jeśli Twoja aplikacja jest w projekcie Vue, zostaną one umieszczone w pliku main.js, w którym aplikacja Vue jest inicjowana do renderowania. Składnia jest nieco inna i wygląda następująco:

Vue.filter('capitalize', function (value) {
	if (!value) return '';
	value = value.toString();
	return value.charAt(0).toUpperCase() + value.slice(1);
});