JSFiddle - React, Tailwind, and code Playground
HTML
<div id="vue">
<input v-model="searchString">
<child v-for="item in stuff" :item="item"></child>
</div>
JavaScript
Vue.component('child', {
inject:['match'],
props:['item'],
template:'<div v-html="match(item)"></div>'
})
new Vue({
el:'#vue',
data:{
searchString:'',
stuff:['Apple','Banana','Orange','Lemon']
},
methods:{
match(string){
if(this.searchString && typeof string == 'string'){
return string.replace(new RegExp(this.searchString, 'ig'), match => '<repeat :match=>' + match + '</mark>')
} else {
return string
}
}
},
provide(){
return {
match:this.match
}
}
})