在 vuetify v-select 中显示原始 html

Posted 2023-02-22

【中文标题】在 vuetify v-select 中显示原始 html

【英文标题】：show raw html in vuetify v-select

【发布时间】：2019-11-02 01:07:31

【问题描述】：

我的问题似乎很简单，但无法弄清楚。

我有这个

  <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 选项中显示分数而不只是简单的 ¼ ？

【问题讨论】：

也许这个答案会帮助你***.com/questions/30877491/vue-display-unescaped-html

我知道我可以使用 ，但我不知道如何使用 Vuetify VSelect。

我认为您使用的是十进制代码而不是 Html 实体¼

【参考方案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>

【讨论】：

v-slot 不能用于模板和组件以外的元素。我将 div 更改为模板。现在它说无法读取未定义的长度。

我更新了解决方案。需要取消引用对象的 item.text。