在 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 更高级的东西。

如果您想要更简洁的代码，您也可以使用slot 和slot-scope 将div 直接放入槽中，而不是v-slot。

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

较新的语法

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