Question

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

我有这个

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

common.users.options是这样的：

[
    { value:".25",text:"&#188; hour" },
    { value:".5",text:"&#189; hour" },
]

不好的是，VSelect如您所见向我显示了＆＃188和＆＃189，而没有将其转换为分数html。 https://www.codetable.net/decimal/188

如何在不带普通＆＃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和slot代替slot-scope将v-slot直接放入插槽中。

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

在vuetify v-select中显示原始html

1 个答案: