[Vuejs]-How to change text-color of a substring found in a string which matches the search_key in Vuejs?

by

0👍

My suggestion is that you render a computed value of the text you do the search on, that wraps search_key inside a tag that highlights it. (I guess it will also work with using a method).
Here’s snippet that gives you an idea of you can do that.

<template>
    <div>
        <input v-model="search_key" placeholder="search ">
        <div v-html="textpWithHilght"></div>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                'search_key': '',
                'theText': "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
            }
        },
        computed: {
            textpWithHilght: function(){
                return this.theText.replace(
                    this.search_key, 
                    '<span class="bg-yellow-200">' + this.search_key + '</span>')
            }
        },
    }
</script>

It can be improved a lot (using regex, case sensitivity, …) but i hope it’s helpful

Leave a comment