Uvod
Napomena za Vue 3 (2026): Filters API ( Vue.filter, filters: {}, {{ value | filter }}) je uklonjen u Vue 3. Umesto toga koristite computed svojstva ili methods (migration guide). Ostatak članka opisuje stari Vue 2 pristup (legacy).
Vue filter je u suštini funkcija koja uzima vrednost, obrađuje je, a zatim vraća obrađenu vrednost. Filteri nisu zamene za metode, computed properties ili watch svojstva, jer filteri ne transformišu podatke, već samo transformiše izlaz koji korisnik vidi.
Filteri mogu da se nadovezuju jedan na drugi i kao sve funkcije mogu da prime argumente. Kada se koristi filter, njegov kontekst je postavljen na instancu koja se poziva na njega, stoga i ključna reč „this“ ukazuje na nju.
Spisak sajtova koji nude pripremljene filtere:
Vue 3 alternativa (preporučeno)
Formatiranje vrednosti uradite preko computed svojstva ili metode:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { createApp, computed, ref } from "vue"; createApp({ setup() { const message = ref("hello world"); const camel = computed(() => message.value.toLowerCase().replace(/(^|s)w/g, (letter) => letter.toUpperCase()) ); return { message, camel }; }, template: `<p>{{ camel }}</p>`, }).mount("#app"); |
Registrovanje filtera (samo Vue 2)
Filteri mogu da se registruju globalno i lokalno.
Lokalno registrovanje
|
1 2 3 4 5 |
filters: { filterName(value) { return // thing to transform } } |
Globalno registrovanje
|
1 2 3 |
Vue.filter('filterName', function(value) { return // thing to transform }); |
NAPOMENA:
Kod koji definiše filter globalno mora da bude napisan pre koda koji definiše instancu
Primer
U ovome primeru definišemo filter koji transformiše izlaz teksta tako da početak svake nove reči počinje velikim slovom.
|
1 2 3 4 5 6 7 8 9 10 |
Vue.filter('camel',function(str){ return str.toLowerCase().replace(/^w|sw/g, function (letter) { return letter.toUpperCase(); }) }) new Vue({ el: '#app', template: '<App/>', components: { App } }) |
Korišćenje filtera
Filteri mogu da se implementiraju na dva načina: mustache interpolations i v-bind expressions
a) Integracija sa interpolacijom
Filteri se integrišu kao izraz za interpolaciju tako što se nadovezuju izraz koji treba da transformišu sa specijalnim znakom „|“ (eng. pipe):
|
1 |
{{ message | nazivFiltera }} |
Filteri modu da se nadovezuju:
|
1 |
{{ message | filterA | filterB }} |
A pošto su filteri u stvari funkcije onda mogu i da prime argumente:
|
1 |
{{ message | filterA('arg1', arg2) }} |
Primer
See the Pen Filter by Web programiranje (@chos) on CodePen.
b) Integracija sa v-bind
|
1 |
<div v-bind:id="rawId | nazivFiltera"></div> |