Vuejs の検索メニューとドロップダウン メニューを使用して配列をフィルタリングするときに発生する問題

Question

リーリー

最初は、ユーザー データが完全にロードされます。後で、2 つのフィルター、つまり検索フィルター用の 1 つに基づいて、すべてのユーザーの配列から配列を除外する必要があります。次に、users 配列のステータスに基づくドロップダウンでは、配列をフィルタリングする必要があります。

コードを変更して正しく動作するようにする方法。現在、検索またはドロップダウンから配列をフィルタリングしません。ただし、それはデータを表示するだけです。

Answer 1

この例が正しく動作するには、いくつかの変更が必要です。

まず、表示内容を更新する必要があります。現在のリスト (フィルタリングされたリストが含まれる) の代わりに、変数 sourceInfo を出力することをお勧めします。したがって、HTML セクションのどこかに

を追加します。 リーリー

この変更を行った後は、コンソールにエラー メッセージが表示されているはずです。これは、sourceInfo の内容が使用されており、最終的に評価されるためです。メッセージの内容は次のとおりです。

リーリー

したがって、this.userList を this.users に変更する必要があります。これは、ユーザーのリストを含む実際の変数です。

リーリー

別のエラーがポップアップ表示されます:

リーリー

これは、includes() 関数によって返されることが期待される boolean に sort() 関数を適用することで得られます。したがって、最後のステップとして、ユーザーがテキスト検索条件に一致するかどうかをチェックし、結果を返す前にそれを適用するフィルターの sort() 部分を削除します。 リーリー

これで基本的な機能が動作するはずです。ドロップダウンのフィルターをチェックすると、

nok の場合、1 人のユーザーが対応するステータスを持っている場合でも、空の配列が返されることに気づくかもしれません。これは、ドロップダウン要素 nok に値 notok が割り当てられているためです。したがって、値を nok に変更するだけです。 リーリー

コードを実行する codesandbox へのリンクは次のとおりです:

https://codesandbox.io/s/vue-sort-problem-hgdm7?file=/src/components/HelloWorld.vue