show raw html in vuetify v-select

Question

My question seems to be easy, but couldn't figure this out.

I have this

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

common.users.options is something like this:

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

The bad thing is that VSelect shows me &#188 and &#189 as you see, without transforming it into fraction html. https://www.codetable.net/decimal/188

how do I show fraction into vselect option's without just plain &#188 ?

Answer 1

Override the item and selection slots, and use 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>

Of course you can use something fancier than a div.

If you want more succinct code, you can also put a div directly in a slot using slot and slot-scope instead of v-slot.

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

Newer Syntax

<template #item='{item}'>
  <div v-html='item.text' />
</template>