HTML в подсказках

Question

Раньше (я думал?) Можно было добавить HTML в подсказки vuetify, но для меня это больше не работает. Например, в одном из моих компонентов у меня есть:

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

Эта подсказка раньше отображалась красным, но теперь я вижу полный код HTML. Что-то изменилось или я что-то не так делаю?

Answer 1

поведение изменено с 1.5.19 до 1.5.20

• 1.5.19 (и ранее) обрабатывает html теги как ожидалось
• 1.5.20, 1.5.21 обработка html теги как простой текст

Answer 2

На форуме Vuetify MajesticPotatoe указал мне на сообщение об ошибке https://github.com/vuetifyjs/vuetify/issues/9647. Это дало следующий способ обхода слотов, который работает в моем коде:

<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>

Похоже, что раньше он работал без слотов до того, как патч https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d был объединен.

Answer 3

'подсказка' является типом 'строка', поэтому вы не можете добавлять HTML теги. Вот скриншот из документации: https://prnt.sc/qlag61

Итак, я думаю, вы можете применить красный цвет из CSS / S CSS, используя имя этого класса '.v-messages__message' если вам действительно нужен красный цвет в подсказке.