Comment utiliser Vue pour implémenter des fonctions de filtrage et de récupération de données ?

Vue est un framework JavaScript populaire souvent utilisé pour créer des applications Web modernes. Le système de liaison de données Vue rend le développement front-end plus simple et plus intuitif. Vue fournit également des outils utiles pour traiter les données, tels que le filtrage. Dans cet article, nous présenterons comment utiliser Vue pour implémenter des fonctions de filtrage et de récupération de données.

1. Utiliser les propriétés calculées pour le filtrage des données

Les propriétés calculées de Vue sont réactives et peuvent mettre à jour les données en temps réel en fonction des modifications des données dépendantes. Cela nous permet d'écrire des filtres de données très facilement. Les propriétés calculées peuvent renvoyer un nouveau tableau qui peut être utilisé pour afficher des données filtrées dans notre application.

Dans l'exemple ci-dessous, nous implémentons la fonction de recherche via une zone de saisie. Nous lions cette zone de saisie au modèle de données d'une instance de composant Vue. Nous utilisons ensuite des propriétés calculées pour filtrer les données de la liste afin d'afficher uniquement les éléments contenant le mot-clé de recherche.

HTML:

<div id="app">
  <input v-model="search" type="text" placeholder="Search...">
  <ul>
    <li v-for="item in filteredItems">{{ item }}</li>
  </ul>
</div>

JavaScript:

new Vue({
  el: '#app',
  data: {
    search: '',
    items: [
      'Apple',
      'Banana',
      'Orange',
      'Mango',
      'Pear'
    ]
  },
  computed: {
    filteredItems: function () {
      var search = this.search.toLowerCase();
      return this.items.filter(function (item) {
        return item.toLowerCase().indexOf(search) !== -1;
      })
    }
  }
})

Nous lions la zone de saisie à l'attribut de recherche via la directive v-model. Nous utilisons ensuite la directive v-for pour restituer les données filtrées dans le modèle.

Dans les propriétés calculées de l'instance Vue, nous convertissons d'abord le mot-clé de recherche en minuscules, puis utilisons la méthode filter() pour filtrer les éléments qui correspondent au mot-clé de recherche.

2. Combinez le routage et les propriétés calculées pour le filtrage et la récupération des données

Si nous utilisons Vue Router pour gérer le routage, nous pouvons utiliser les paramètres de requête du routeur pour implémenter des fonctions de recherche plus avancées. De cette façon, les utilisateurs peuvent voir leurs résultats de recherche dans l'URL et partager les résultats de recherche via les paramètres de requête d'URL.

HTML : 

Nous devons d’abord modifier la liaison de notre zone de saisie afin de transmettre la valeur de recherche en tant que paramètre de requête. Nous utilisons l'objet $route dans le routeur pour obtenir les paramètres de recherche. Ensuite, nous modifions la propriété calculée pour utiliser les paramètres de route au lieu du modèle de données de l'instance de composant.

<div id="app">
  <input v-model="search" type="text" placeholder="Search...">
  <ul>
    <li v-for="item in filteredItems">{{ item }}</li>
  </ul>
</div>

JavaScript :

const router = new VueRouter({
  routes: [{
    path: '/',
    component: App,
    name: 'home'
  }]
});

const App = {
  data: function() {
    return {
      items: [
        'Apple',
        'Banana',
        'Orange',
        'Mango',
        'Pear'
      ],
      search: ''
    };
  },
  computed: {
    filteredItems: function() {
      var search = this.$route.query.search.toLowerCase();
      return this.items.filter(function(item) {
        return item.toLowerCase().indexOf(search) !== -1;
      });
    }
  }
};

new Vue({
  router,
  el: '#app',
  template: '<router-view></router-view>'
});

Nous passons le routeur à l'instance Vue puis remplaçons la directive router-view par notre composant. Dans le composant, nous pouvons utiliser $route.query.search pour obtenir les paramètres de requête. Nous utilisons ensuite des propriétés calculées pour filtrer la liste en fonction des paramètres de recherche.

Dans cet exemple, tant que l'utilisateur saisit un nouveau mot-clé de recherche dans la zone de saisie, nous mettrons à jour les paramètres de requête dans l'URL et mettrons à jour la liste en fonction des nouveaux paramètres.

Résumé :

Dans cet article, nous avons présenté l'utilisation de propriétés calculées et de routeurs dans Vue pour implémenter des fonctions de filtrage et de récupération de données. De cette façon, nous permettons aux utilisateurs de visualiser leurs résultats de recherche dans une URL et de partager facilement les résultats ailleurs. Nous avons également vu que le système de liaison de données et de propriétés calculées de Vue simplifie grandement la difficulté de mise en œuvre des fonctions de recherche et de filtrage sur le front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!