Les filtres dans VueJs

Les filtres dans VueJs sont assez simples.

On parle ici de 2 types de filtres :

• La fonction javascript filter qui permet de filtrer une liste de données
• Les filtres VueJs qui sont en fait un filtre d’affichage : ils modifient ce que voit l’utilisateur sans modifier la donnée. Vous verrez exactement de quoi on parle dans la partie ci-dessous qui s’y rapporte.

Fonction filter

La fonction filter permet de filtrer une liste et de renvoyer un résultat correspondant au filtre donné. Ce filtre se fait généralement dans une propriété calculée.

1. Créer la liste bindée sur un tableau d’articles

Je m’explique : imaginons une liste d’articles à vendre :

• Chaise de salle à manger
• Chaise de bureau
• Bureau
• Ordinateur
• Meuble TV

Voici le code de notre App.vue pour avoir cette liste en utilisant un tableau comme source de données :

<template>
  <div id="app">
    <ul>
      <li v-for="article in articles" v-bind:key="article">{{ article }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      articles: [
        'Chaise de salle à manger',
        'Chaise de bureau',
        'Bureau',
        'Ordinateur',
        'Meuble TV'
      ]
    }
  }
}
</script>

2. Créer le filtre

Si on veut filtrer dans cette liste tous les articles qui contiennent « chaise », on peut le faire grâce à la fonction filter. Pour se faire, on va ajouter un élément « input » type « texte » qui va être bindé sur une variable « inputFilter » pour que notre filtre soit retenu dans notre modèle VueJS. Voici les modifications à apporter dans le code :

...
<input type="text" v-model="inputFilter" />
<ul>
...
...
articles: [...],
inputFilter: ''
}...

3. Appliquer le filtre

A présent, nous avons donc une textbox pour filtrer suivie d’une liste d’articles. Pour que notre liste soit filtrée, on va créer une propriété calculée « filteredArticles » qui ne va retourner que les articles correspondant au filtre de notre textbox. Et c’est cette propriété calculée qui va servir de source de données à notre liste. Ainsi, ce qui est affiché est bien une liste filtrée. Voici l’adaptation du code :

...
<ul>
  <li v-for="article in filteredArticles" v-bind:key="article">{{ article }}</li>
...
export default {
...
computed: {
    filteredArticles() {
      return this.articles.filter((element) => {
        return element.match(this.inputFilter);
      });
    }
...

4. Le code complet

Voici donc le code complet de notre App.vue une fois notre liste filtrée utilisée comme source de données et le filtre mis en place :

<template>
  <div id="app">
    <ul>
      <input type="text" v-model="inputFilter" />
      <li v-for="article in filteredArticles" v-bind:key="article">{{ article }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      articles: [
        'Chaise de salle à manger',
        'Chaise de bureau',
        'Bureau',
        'Ordinateur',
        'Meuble TV'
      ],
      inputFilter: ''
    }
  },
  computed: {
    filteredArticles() {
      return this.articles.filter((element) => {
        return element.match(this.inputFilter);
      });
    }
  }
}
</script>

Filtres dans VueJs

Les filtres de la section VueJs FILTERS ne sont pas là pour filtrer des listes mais plutôt pour appliquer un traitement à une donnée et retourner le résultat du traitement sans modifier réellement la donnée. Je m’explique : imaginez une donnée de type « chaîne de caractères » : « Ceci est un TEST ». Imaginons le filtre lowercase. En l’appliquant sur cette chaîne de caractères, on obtient : « ceci est un test » tout en minuscules. L’utilisation d’un filtre se fait comme ceci : donnée | filtre. On peut même faire donnée | filtre1 | filtre2.

1. Création de la page

Commençons par se créer une page principale (App.vue) qui contient un contrôle d’input et un SPAN qui affiche la même donnée. C’est dans ce SPAN qu’on va appliquer le filtre.

Voici le code de la page avec ces 2 contrôles :

<template>
  <div id="app">
    <input type="text" v-model="texte">
    <span>{{ texte }}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      texte: ''
    }
  }
}
</script>

2. Filtre local

Un filtre VueJs est une méthode qui prend une donnée en paramètre, qui la traite et qui retourne le résultat du traitement.

Un filtre local est donc une méthode qu’on ajoute au même endroit que les données DATA mais dans une section FILTERS. Voici le fichier App.vue modifié :

<template>
  <div id="app">
    <input type="text" v-model="texte">
    <span>{{ texte | lowercase }}</span>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      texte: ''
    }
  },
  filters: {
    lowercase(value) {
      return value.toLowerCase();
    }
  }
}
</script>

On a donc 2 modifications : le « | lowercase » dans le SPAN qui applique le filtre lowercase et la méthode « lowercase » ajoutée dans la partie « filters » qui représente le traitement de notre filtre.

3. Filtre global

Pour créer un filtre global, il suffit de retirer notre partie filters de notre fichier App.vue et dans notre fichier principal App.js, définir notre filtre en global via Vue.filter(‘nomdufiltre’, function(value) { traitement });

Voici le code complet de notre App.js modifié pour avoir le filtre disponible partout et donc en global :

import Vue from 'vue'
import App from './App.vue'

Vue.filter('lowercase', function(value) {
  return value.toLowerCase();
});

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Pour résumer

Pour résumer, on voit donc qu’il existe bien 2 types de filtres :

• La méthode javascript filter qu’on peut appliquer sur un array pour filtrer une liste de données
• Les filtres VueJs qui appliquent un traitement à une donnée sont également simple à mettre en place puisqu’il s’agit simplement d’une fonction qui prend une donnée en paramètre et retourne un résultat suite à un traitement.
  • Soit on a un filtre local (via la partie filters de notre composant .vue dans lequel on veut l’appliquer)
  • Soit on a un filtre global dans App.js via Vue.filter(‘nomdufiltre’, function(value) { traitement });

J’espère que cet article vous aura plu. Il y en aura d’autres qui suivront alors pour ne rien manquer, n’hésitez pas à vous abonner à ce blog, à liker et à commenter cet article. A bientôt sur le blog developpement-web-facile.com.