CODEWITHSUNDEEP
vuetify.js
Andrew
Andrew

Reputation: 291

HTML in vuetify hints

Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:

<v-checkbox
   v-model="create"
   label="Nice label"
   persistent-hint
   hint="<span class=&quot;red--text&quot;>Red hint</span>"
/>

This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?

Upvotes: 2

Views: 4702

Answers (3)

user2981988
user2981988

Reputation: 31

behaviour changed from 1.5.19 to 1.5.20

  • 1.5.19 (and before) treats html tags as expected
  • 1.5.20, 1.5.21 treat html tags as simple text

Upvotes: 3

Andrew
Andrew

Reputation: 291

In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:

<v-checkbox
   v-model="create"
   label="Nice label"
   persistent-hint
   hint="<span class=&quot;red--text&quot;>Red hint</span>"
>
<template v-slot:message="{ message, key }">
 <span v-html="message"></span>
</template>
</v-checkbox>

It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.

Upvotes: 11

Bibek Shakya
Bibek Shakya

Reputation: 151

'hint' is the 'string' type so you can't add HTML tags. Here is the screenshot from documentation: https://prnt.sc/qlag61

So, I think you can apply red color from CSS / SCSS using this class name '.v-messages__message' if you really need red color in hint.

Upvotes: 2

Related Questions