検索結果のキーワード(クエリ)一致部分をハイライトする(色を付ける)方法
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から廃止されるからやめたほうがいい。