在 vuetify v-select 中显示原始 html

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 向我显示了 ¼ 和 ½，而没有将其转换为分数 html。 https://www.codetable.net/decimal/188

如何在不只是简单的 ¼ 的情况下将分数显示到 vselect 选项中？

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使用slotandslot-scope代替将 a直接放在插槽中v-slot。

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