【Firebase】Vue・Vuetifyでタグ 機能・検索の実装

前書き

前回にキーワード検索の実装を行いましたが、
これ・・・タグ検索の方がええなと思い、急遽タグ検索に切り替えました。

melheaven.hatenadiary.jp

投稿時にタグの追加（Post.vue）| 投稿ページ

Vueファイルのtemplateタグとscriptタグの中身からタグ検索関連を抜粋したコードです。

<v-combobox
            multiple
            v-model="select"
            label="Tags"
            append-icon
            chips
            deletable-chips
            class="tag-input"
            :search-input.sync="search"
            @keyup.tab="updateTags"
            @paste="updateTags"
></v-combobox>

data() {
return { select: ["就活", "性格", "関心"], }
},
methods: {
   updateTags() {
      this.$nextTick(() => {
        this.select.push(...this.search.split(","));
        this.$nextTick(() => {
          this.search = "";
        });
      });
     }
}

フォームに文字を入力し「,」を入力すると、文字列を区切り、タグとして認識されます。
最初のselectに設定されているワードは初期からフォームに設定されているタグになっています。
タグを入力すると、v-modelに設定しているselectは配列型ですので、
配列の要素にタグが追加されていきます。
FireStoreにデータを渡すときも、配列型としてデータを格納することになります。

フォーム画面

タグ検索（auth.js）

実は言うとキーワード検索の時とほとんど変わりません。
melheaven.hatenadiary.jp

ただqueryの部分に変更が必要です。
tagsフィールドの中に検索Tags Word（配列）のいずれかが入っているドキュメントを取得してくれます。
"array-contains-any"はwhereの第3引数に検索Tags Waord（配列）を指定できます。
参考は以下のサイトです。
nabettu.hatenablog.com

通常キーワード検索

query = query.where('displayName', '==', searchWord).limit(limit);

タグ検索

query = query.where('tags', 'array-contains-any', searchWord).limit(limit);

FireStoreでの設定

「Firebase→Cloud FireStore→インデックス」にてインデックスを追加します。
今回はtags（配列）、createdAt（昇順）を登録し、ステータスを有効にします。

デザイン

vuetifyjs.com

v-chipを使ってデザイン修正。

 <v-chip
                  v-for="tag in expansion.tags"
                  :key="tag"
                  color="#17204d"
                  text-color="yellow"
                >
                  <v-icon left>label</v-icon>
                  {{tag}}
</v-chip>

結果