показать необработанный HTML в vuetify v-select

Question

Мой вопрос кажется легким, но я не мог понять это.

У меня есть

  <VSelect :items="common.users.options" ></VSelect> which just shows me select and its options. 

common.users.options выглядит примерно так:

[
    { value:".25",text:"¼ hour" },
    { value:".5",text:"½ hour" },
]

Плохо то, что VSelect показывает мне & # 188 и & # 189, как вы видите, без преобразования в дробную HTML. https://www.codetable.net/decimal/188

как мне показать дробь в опции vselect без простого & # 188?

Answer 1

Переопределите слоты item и selection и используйте v-html.

<v-select :items='item'>
 <template v-slot:item='{item}'> <div v-html='item.text'/> </template>
 <template v-slot:selection='{item}'> <div v-html='item.text'/> </template>
</v-select>

Конечно, вы можете использовать что-то более изумительное, чем div.

Если вычтобы получить более сжатый код, вы также можете поместить div непосредственно в слот, используя slot и slot-scope вместо v-slot.

 <div slot='item' slot-scope='{item}' v-html='item.text'/>