In questa lezione parleremo brevemente dei filtri che rappresentano una soluzione per trasformare e formattare dei dati dinamici di un componente.
Prima di continuare è bene fare due precisazioni importanti:
- i filtri non modificano i dati originali, ma restituiscono una ‘copia’ formattata dei dati in ingresso
- A partire dalla versione 3 di Vue.js i filtri sono stati rimossi ed è consigliato sostituirli con dei metodi. Tuttavia può essere utile capire cosa sono e come funzionano visto che si possono trovare all’interno del codice di applicazioni che utilizzano la versione 1 o 2 di Vue.js
Definire ed usare dei filtri
I filtri possono essere usati essenzialmente in due circostanze: all’interno di un’espressione di interpolazione e nelle espressioni passate alla direttiva v-bind.
Per usare un filtro basta appendere il carattere ‘|’ (pipe) e il nome del filtro ad una certa espressione.
Per esempio, all’interno del template di un certo componente potremmo avere un frammento di codice come quello riportato nel riquadro sottostante.
<-- usare un filtro all'interno di un'espressione di interpolazione -->
{{ name | uppercase}}
<-- usare un filtro nell'espressione della direttiva v-bind -->
<User v-bind:name="usersArray | lastElement">Come per le direttive ed i componenti, anche per la registrazione dei filtri abbiamo due possibilità:
- registrazione globale
- registrazione locale
Definire un filtro globalmente
La registazione globale è utile nei casi di filtri condivisi da più componenti. In questo caso dovremo registrare il filtro, prima di creare l’istanza globale di Vue, attraverso il metodo Vue.filter() a cui passiamo due argomenti: il nome del filtro e una funzione che definisce il comportamento del filtro stesso.
Vue.filter('max', function (values) {
if (Array.isArray(values) && values.length > 0) {
return Math.max(...values);
}
return -Infinity;
});Possiamo quindi usare il filtro all’interno del template di un componente.
<template>
<div>
<!-- Sintassi usata per il filtro: {{ marks | max }} -->
Il valore massimo di {{ marks }} è: {{ marks | max }}
</div>
</template>
<script>
export default {
data() {
return {
marks: [1, 9, 4, 6, 10, 8, 5]
}
}
}
</script>Definire un filtro localmente
In alternativa possiamo registrare un filtro locale in un componente utilizzando la proprietà filters dell’oggetto di opzioni.
<template>
<p>
<!-- P.P. -->
{{ name | initials }}
</p>
</template>
<script>
export default {
filters: {
// restituisce le iniziali di un nome
initials(name) {
if(typeof name !== 'string') {
return '';
}
const names = name.split(' ');
const reducer = (initials, currentValue) =>
`${initials}${currentValue.charAt(0).toUpperCase()}.`;
return names.reduce(reducer, '');
}
},
data() {
return {
name: 'Peter Palchinsky'
}
}
}
</script>Filtri con argomenti aggiuntivi
I filtri visti finora presentano un singolo parametro. In fase di esecuzione, Vue.js provvede ad invocare il filtro passando il valore del dato che deve essere formattato o trasformato.
Trattandosi di funzioni, possiamo però definire filtri con un numero maggiore di parametri. Il primo sarà sempre riservato al valore che verrà passato da Vue.js. Gli altri parametri possono essere usati nel corpo della funzione per modificare il comportamento del filtro.
<template>
<p>
<!-- 5,00 € -->
{{ price | currency }}
<!-- 5,00 £ -->
{{ price | currency('GBP') }}
<!-- £5.00 -->
{{ price | currency('GBP', 'en-US') }}
</p>
</template>
<script>
export default {
filters: {
currency(value, currency = 'EUR', locale='it-IT') {
if (typeof value === 'number') {
const formatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency,
minimumFractionDigits: 2
})
return formatter.format(value);
}
}
},
data() {
return {
price: 5
}
}
}
</script>In questo caso all’interno del template passiamo gli argomenti utili alla configurazione del filtro. Nell’esempio appena illustrato, abbiamo utilizzato dei valori predefiniti che vengono impiegati dal filtro se non forniamo argomenti aggiuntivi.
<!-- 5,00 € -->
{{ price | currency }}
<!-- 5,00 £ -->
{{ price | currency('GBP') }}
<!-- £5.00 -->
{{ price | currency('GBP', 'en-US') }}Concatenare dei filtri
Due o più filtri possono essere facilmente concatenati sempre attraverso il carattere ‘|’.
{{ piloti | first | capitalize | prefix('Sig.') }}I filtri vengono applicati in ordine da sinistra verso destra. Nell’esempio riportato sopra, il filtro first sarebbe il primo ad essere invocato mentre al termine della trasformazione verrebbe eseguito prefix('Sig.').
Riepilogo
In questa lezione abbiamo parlato dei filtri che rappresentano un modo per formattare e trasformare dei dati di un componente. I filtri non modificano mai direttamente i dati originali su cui lavorano. Sebbene siano stati rimossi a partire dalla versione 3 del framework, si possono trovare o usare in applicazioni basate su precedenti versioni di Vue.js. Abbiamo visto come creare dei filtri senza e con argomenti e come impiegarli all’interno di un template utilizzando il carattere pipe (‘|’). Nella prossima lezione presenteremo i mixins che costituiscono uno strumento per riutilizzare e condividere frammenti di codice fra componenti. Anticipiamo fin da ora che a partire dalla versione 3 di Vue.js è sconsigliato usare i mixins, al contrario è stata introdotta la cosiddetta Composition API di cui parleremo nelle prossime lezioni.
