v-select에 원시 html 표시

v-select에 원시 html 표시

내 질문은 쉬운 것 같지만, 이것을 알아낼 수가 없었다.

나는 이것을 가지고 있다.

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

common.users.properties는 다음과 같은 것이다.

[
    { value:".25",text:"¼ hour" },
    { value:".5",text:"½ hour" },
]

나쁜 점은 VSelector가 fraction html로 변형시키지 않고 보시다시피 나에게 &#188과 &#189를 보여준다는 것이다.https://www.codetable.net/decimal/188

일반 &#188 없이 vselect 옵션의 일부분을 표시하는 방법

오버라이드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>

물론 당신은 a보다 더 멋진 것을 사용할 수 있다.div.

좀 더 간결한 코드를 원한다면, 당신은 또한 a를 넣을 수 있다.div을 이용하여 바로 구멍에.slot그리고slot-scope대신에v-slot.

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

새 구문

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

참조URL: https://stackoverflow.com/questions/56665185/show-raw-html-in-vuetify-v-select