Vue.js を使った動的メニューツリー検索の構築

はじめに

このプロジェクトでは、Vue.jsを使って動的なメニューツリー検索機能を構築する方法を学びます。このプロジェクトでは、JSONファイルからサブメニューデータを取得し、曖昧検索機能を実装し、フィルタリングされたメニューツリーをページに表示します。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

• axios ライブラリを使ってJSONファイルからサブメニューデータを取得する方法
• ユーザーの入力に基づいてメニュー項目をフィルタリングする検索機能を実装する方法
• 一致するテキストを強調表示しながら、フィルタリングされたメニューツリーをページに表示する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• Vue.jsを使って動的で対話型のユーザーインターフェイスを開発する
• JSONファイルからデータを取得し、非同期データ取得を処理する
• ユーザー入力に基づいてデータをフィルタリングする曖昧検索機能を実装する
• 階層型のメニューツリー構造を表示し、一致するテキストを強調表示する

Skills Graph

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了してください。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── js
│    ├── axios.min.js ## 非同期データ取得に使用するAjaxカプセル化ライブラリ
│    ├── index.js ## ページ機能を実装するロジックコード
│    └── vue.js ## Vue.jsフレームワークの2.x版
├── data.json ## サブメニューの全データ
└── index.html ## ページレイアウト

WebIDEの右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

現在は、静的なレイアウトのみが表示され、サブメニューデータの非同期取得と表示、および曖昧検索機能は実装されていません。

サブメニューデータを取得する

このステップでは、axios ライブラリを使って data.json ファイルからサブメニューデータを取得する方法を学びます。

1. /js ディレクトリ内の index.js ファイルを開きます。
2. created() ライフサイクルフック内で、axios.get() メソッドを使って data.json ファイルからデータを取得します。

created() {
  axios.get("../data.json").then((res) => {
    this.list = res.data;
    this.resultList = res.data;
  });
},

このコードは、data.json ファイルからデータを取得し、それを list と resultList データプロパティに格納します。

検索機能を実装する

このステップでは、サブメニュー項目の検索機能を実装する方法を学びます。

1. index.js ファイルで、methods オブジェクトに searchData() メソッドを追加します。

methods: {
  searchData() {
    // TODO: Implementing the search function
    this.resultList = [];
    let set = new Set();
    this.list.forEach((item1) => {
      if (item1.meta.title.search(this.search)!== -1) {
        set.add(item1);
      }
      if (item1.children) {
        item1.children.forEach((item2) => {
          if (item2.meta.title.search(this.search)!== -1) {
            set.add(item1);
          }
        });
      }
    });
    this.resultList = set;
  }
}

2. 検索入力に基づいて resultList データプロパティを更新します。searchData() メソッドは、list データをループして、一致する項目を Set オブジェクトに追加します。その後、Set オブジェクトが resultList データプロパティに割り当てられます。

この実装により、検索クエリに一致するサブメニュー項目が表示され、一致するテキストが黄色の背景で強調表示されます。

これらの変更により、ページは検索入力に基づいてフィルタリングされたメニューツリーを表示し、一致するテキストが強調表示されます。

最終的な実装の効果は以下の通りです。

まとめ

おめでとうございます！このプロジェクトを完了しました。実験技術を向上させるために、LabExでさらに多くの実験を行ってみましょう。