CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Terje Nygård
Terje Nygård

Reputation: 1257

Javascript / Vue : set background-color on specific parts of string, based on matched values in array

I'm struggling with making a script which sets background-color on specific parts of a string (or input in this case, but doesn't have to be...).

The solution is made with VUE, but i assume this has to be sorted out with core javascripting.

HTML :

<div class="col-sm-7">
    <input v-model.lazy="item.text" class="form-control" style="width:98%">
</div>

VUE Computed :

nluData() {
        return orderby(this.$store.getters.nlujson.filter(item => {
            return item.intent.toLowerCase() === this.selectedIntent
        }), ['intent', 'text'], ['asc', 'asc'])
    },

Screenshot of JSON structure : enter image description here

Screenshot of desired result (where arrows point, the word-blocks should be background-colored : enter image description here

Upvotes: 1

Views: 500

Answers (1)

mathk
mathk

Reputation: 8143

You can use v-html and style your text as desired.

<span v-html="text"></span>

And in you component you can use the computed value as you want:

computed: {
     text () {
        // Code logic of your convenience 
        // Be careful of XSS attack.
        return '<b>' + this.someText + '</b>';
     }
}

Upvotes: 3

Related Questions