Vue JS v-html 指令呈現原始 html

Question

這是我的組件的樣子

<template>
 <div v-html="someHtml"></div>
</template>

 <script>
 export default {
   name: "test",
   props: {
    someHtml: String,
   },
 }
 </script>

組件在故事書中的使用方式：

export const testtest = () => ({
  components: {test},
  props: {
    someHtml: {default: text('somehtml', '<a href="link" class="link text-theme">see data</a>')}
},
template: `
    <test v-bind="$props"/>
`,
});

Output 始終是 html 像這樣的原始字符串 ==>

<a href="link" class="link text-theme">see data</a>

我知道這可能會引起很多反對意見，但我找不到一種方法來完成這項工作。 文檔對用法很清楚，但它仍然對我不起作用。

我將原始 html 作為道具傳遞。 當我使用來自 vue js 數據的原始 html 時，它正在工作並且能夠“解析” html 字符串並正確呈現它。

Answer 1

這不是v-html的問題，而是由故事書引起的 - text旋鈕轉義 HTML 。

不過，有一種方法可以將其關閉，方法是將旋鈕插件的escapeHTML設置為false 。

Answer 2

[ 解決方案 ]

要呈現 v-html，請按照以下步驟操作。 1.你的模板應該是這樣的

<template>
  <div v-html='someText'></div>
</template>

<script>
 export default {
   name: "test",
   props: {
    someHtml: String,
   },
   data(){
       return{
         someText: this.props.someHTML,
       }
     }   
 }
 </script>

這應該可以正常工作。 HTML 代碼應在數據 object 中定義，以便在 Vuejs 上以 V-html 呈現