CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
tlalco
tlalco

Reputation: 420

How can I highlight a word in a Vuetify card when using Vue.js?

I'm trying to highlight a certain word in the text of a Vuetify card but when I include the tag it includes it literally without interpreting it as an HTML tag.

I've tried using 

str.replace('word', '<mark>word</mark>')

//template
<v-card>
    <v-card-text>{{ markedPassage }}</v-card-text>
</v-card>

// script
data() {
    return {
      markedPassage: "some text <mark>word</mark>"
    }
  }

https://codepen.io/edlgg/pen/KKPmojm

I want the selected word to be highlighted. I would also like to be able to change the color but that should be easy to do.

Upvotes: 2

Views: 2636

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You should use v-html directive as follows :

  <v-card-text v-html="markedPassage"></v-card-text>

check this codepen

Upvotes: 2

Related Questions