[Vuejs]-How to highlight a search result in V-data-table – VueJS

by

7👍

✅

You can create a filter like:

filters: {
    highlight: function(value, query){
        return value.replace(new RegExp(query, "ig"), '<span class=\'blue\'>' + query + '</span>')
    }
},

and then use it in the item slots of the appropriate columns…

<template #item.address="{ value }">
     <div :inner-html.prop="value | highlight(search)">
     </div>
</template>

Demo: https://codeply.com/p/3CS7vssZqg

👤Carol Skelly

Leave a comment