**Vue.js（+ TypeScript）**で、文字列に対して動的に$\style{background-color:yellow;}{ハイライト}$をかけたいと思った時に調べた内容です。
ちょっとググるとVueのフィルタで出来る！と見つかったのですが・・・
TL;DR
Vue.jsのフィルター機能は、(使い道によっては)普通のメソッドで書けるんじゃないの？
というお話です。
今回のようなハイライトかけたいような状況ではフィルター機能は使わなかったですね。
廃止するかどうかの熱い議論はこちら。
[Suggestion] Vue 2.0 - Bring back filters please
背景
まずはここ、こんな風にfiltersを定義できるんですねー。知見！
https://qiita.com/pokkur/items/e6c7b20852471a9eca29
で、それにに対して、TypeScript的に書こうとすると、
@Component({
components: { MyForm, MyComponent },
filters: {
highlight(plainText: string, query: string): string {
return plainText.replace(
query,
`<span style='background-color: yellow'>${query}</span>`
);
}
}
})
export default class HogeHoge extends Vue {
...
}
と書けることがわかりました。
componentsに並列させて書くんですね。この辺り、ググってもあまり出てこない内容です。
が！！！
これって、もはやメソッドじゃん！
というツッコミが入ったのは、（zoomで4人くらいで）モブプログラミングをしていた時でした。
上のやつでも機能するんですが、普段使い慣れているメソッドでも書けることが分かり、書き直したものが次のコードになります。
highlight()の中身は全く同じですよね。
@Component({
components: { MyForm, MyComponent }
})
export default class HogeHoge extends Vue {
...
highlight(plainText: string, query: string): string {
return plainText.replace(
query,
`<span style='background-color: yellow'>${query}</span>`
);
}
...
}
ということで、検索対象のテキスト（plainText）に、検索文字列（query）を渡したら部分的にstyleが当たって、ハイライトがかけられるようになりましたー。
実際に試すとすぐ分かるのですが、例えばqueryとして渡している変数がv-modelの変数だったら、レスポンシブにハイライト箇所が変わりますねー。
あとは、正規表現をうまく組み合わせることで、複数の同じ文字列に対してハイライトかけられました！
これでタスク終わり！
タスクも進み、新たな知見も得られて良い1日だった！
今回のタスクでVue.jsが初見殺しだと感じた内容
- コード内で、Mustache記法（二重中括弧,
{{ }}）と三重中括弧({{{ }}})がパッと見だと見分けづらい - フィルタでも書けるし、メソッドでも書ける
- Vueのバージョンにより、三重中括弧が
v-htmlに置き換わっていた（上では特に触れていない内容です）
#その他、参考文献
（2重中括弧はMustache構文などでググりやすいですが、3重中括弧って特に呼び方はついていないんですかね？名前のないものって、ググりにくいですよね。）