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


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する | カバの樹

無制限に質問可能なプログラミングスクール!

万が一転職できない場合は、転職保障全額返金できるコースもあり!!

無制限のメンター質問対応

 

DMMウェブキャンプでプログラミングを学習しませんか?

独学より成長スピードをブーストさせましょう!

 

まずは無料相談から!

おすすめの記事