T sakurako
- 2021年6月22日
- 読了時間: 2分

VueでWEBアプリ(19)

前回データ一覧に検索機能を付けたとき、複数条件での検索の実装はどうなるのかということを書いたので、今回はそれについての記事になります。

結論から言うと、前回の記事で書いた「filterableをうまく使えば複数条件での検索も作れるのでしょうか。」という疑問については、できない　ということでした。

search propを使用する限り検索条件は一つしか無理であるということのようです。

ですので、こちらの記事の方法を参考にさせていただきました。

[Vuetify] V-Data-Table で複数項目のフィルタリングを行う方法

<v-data-table>タグからsearchの記述を消して、<v-text-field>…検索条件入力欄をタイトルと投稿者の２つ分用意し、以下のように修正しました。

見やすくするため二つの入力欄は横並びにしました。

        <v-row>
          <v-col>
            <v-text-field
              v-model="titleValue"
              append-icon="mdi-magnify"
              label="title"
              single-line
              hide-details
            >
            </v-text-field>
          </v-col>
          <v-col>
            <v-text-field
              v-model="authorValue"
              append-icon="mdi-magnify"
              label="author"
              single-line
              hide-details
            >
            </v-text-field>
          </v-col>
        </v-row>

そしてスクリプトのmethods:に項目ごとのフィルタリングの関数を書いています。

この関数をheaders:の各項目でfilter: this.titleFilter　というように定義しています。

       
      titleFilter(value){
        if (!this.titleValue) {
          return true
        }
        return value === this.titleValue
      },
      authorFilter(value){
        if (!this.authorValue) {
          return true
        }
        return value === this.authorValue
      },

これで、

投稿者だけ・タイトルだけ・投稿者＆タイトル

で一覧を検索できるようになりました。ちなみにどれも完全一致でないといけません。

（「テスト」で検索すれば、「てすと」「送信テスト」などは引っかからない状態）

今は本文も10文字の制限を入れていますが、こういった記事投稿のような形式で、

本文も完全一致でないと検索できない、などということはまずおかしいと思うので、今回は本文の検索は実装しませんでした。

次は部分一致でも検索できるようなものを作ってみてもいいかもしれません。