Vue.js 検索結果のキーワード一致部分をハイライト(強調)する方法

検索結果のキーワード（クエリ）一致部分をハイライトする（色を付ける）方法

Vue Text Highlight
というライブラリを使う。

準備

前提条件として、検索機能は実装済みとする。

インストール

アプリのプロジェクトディレクトリ内で

npm install --save vue-text-highlight

と叩く。インストール作業はこれだけ。

インポートする

//プロジェクトディレクトリ\resources\js\app.jsかmain.js
//下記を追記
import TextHighlight from 'vue-text-highlight';
Vue.component('text-highlight', TextHighlight);

vueファイル側ではインポート不要。

ハイライトの対象となる場所を指定する

{{ }}で表示している内容を、text-highliteコンポーネントで挟む。

//Archive.vue

//中略
<v-text-field v-model="key" v-on:keydown.enter="search()" @click:append="search()">
</v-text-field>

//中略

<text-highlight :queries="key">{{inquiry.questioner}}</text-highlight>

//中略
data() {
    return {
         key: '',
    }
}

:queries="key"のkeyは検索キーワードが格納されるモデル名を書くこと。

ほかの変数はだめ。

これでうまく

Error in render: "Error: queries must be either string, array of strings or regex.”のエラーになる場合

data() {return { }}

の中で、

key:null

と変数を初期化しているかも。

key:''とすべき。

↓

//Archive.vue
data() {
    return {
         key: '',
    }
}

途中でnullで上書きしている場合なんかも陥りがち。
意図せずnullになることがあるので、

if (this.hoge != null) {
    this.key = this.hoge;
}

のように、上書き時には絶対にnullが入らないようにするべし。

キーワードが消える場合

<text-highlight :queries="key">ここにはタグ入れてはいけない</text-highlight>

text-highlightタグの間には、{{hoge}}みたいに、文字列だけが結果的出力される様にしないといけない。

<text-highlight :queries="key"><a>{{hoge}}</a></text-highlight>
みたいにすると、その部分が丸ごと何も表示されなくなる。

ライブラリを使わずにVueのFilter機能じゃあかんの？

Vue3から廃止されるからやめたほうがいい。

参考にしたサイト
「Vue Text Highlight」で検索ワードをhighlightする | カバの樹