Création d'une recherche dynamique dans un arbre de menu avec Vue.js

Débutant

Dans ce projet, vous apprendrez à créer une fonctionnalité de recherche dynamique dans un arbre de menu en utilisant Vue.js. Le projet consiste à extraire les données du menu secondaire à partir d'un fichier JSON, à implémenter une fonction de recherche floue et à afficher l'arbre de menu filtré sur la page.

JavaScriptVue.js

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce projet, vous allez apprendre à construire une fonctionnalité de recherche d'arborescence de menu dynamique à l'aide de Vue.js. Le projet consiste à récupérer les données de menu secondaire à partir d'un fichier JSON, à implémenter une fonctionnalité de recherche approximative et à afficher l'arborescence de menu filtrée sur la page.

👀 Aperçu

Dynamic menu tree search demo

🎯 Tâches

Dans ce projet, vous allez apprendre :

  • Comment récupérer les données de menu secondaire à partir d'un fichier JSON à l'aide de la bibliothèque axios
  • Comment implémenter une fonctionnalité de recherche pour filtrer les éléments de menu en fonction de l'entrée de l'utilisateur
  • Comment afficher l'arborescence de menu filtrée sur la page, en mettant en évidence le texte correspondant

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

  • Développer une interface utilisateur dynamique et interactive à l'aide de Vue.js
  • Récupérer des données à partir d'un fichier JSON et gérer la récupération asynchrone de données
  • Implémenter une fonctionnalité de recherche approximative pour filtrer les données en fonction de l'entrée de l'utilisateur
  • Afficher une structure d'arborescence de menu hiérarchique et mettre en évidence le texte correspondant

Enseignant

labby

Labby

Labby is the LabEx teacher.