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 呈现