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:"&#188; hour" },
    { value:".5",text:"&#189; 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 ?

Maybe this answer will help you https://stackoverflow.com/questions/30877491/vue-display-unescaped-html — dganenco, Jun 19 '19 at 10:40
I know I can use {{{ }}} , but i don't know how to do that with Vuetify VSelect. — Nika Kurashvili, Jun 19 '19 at 10:49
I think you are using the Decimal Code instead of Html Entity `¼` — Kushal Suthar, Jun 19 '19 at 12:35

Steven Spungin · Accepted Answer · 2021-11-18T22:12:32.570

15

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>

edited Nov 18 '21 at 22:12

answered Jun 19 '19 at 11:06

Steven Spungin

27,002
5
88
78

v-slot can't be used on element other than template and component. I changed div to template. now it's saying can't read the length of undefined. – Nika Kurashvili Jun 19 '19 at 11:29
I updated solution. Needed to dereference your object's `item.text`. – Steven Spungin Jun 19 '19 at 12:24

show raw html in vuetify v-select

1 Answers1