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"/>
`,
});

输出总是 html 像这样的原始字符串 ==>

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

我知道这可能会遭到很多反对，但我找不到使这项工作成功的方法。文档对用法很清楚，但它仍然不适合我。

我将原始 html 作为道具传递。当我使用来自 vue js 数据的原始 html 时，它正在工作并且能够“解析”html 字符串并正确呈现它。

Answer 1

[解决方案]

要渲染 v-html，请按照以下步骤操作。 1.Your 模板应如下所示

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

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

这应该可以正常工作。 HTML 代码应在数据对象中定义 in-order 以在 VuejsV-html 中呈现

Answer 2

这不是 v-html 的问题，而是故事书引起的 - the text knob escapes HTML。

虽然有一种方法可以关闭此功能，方法是设置 escapeHTML to false for the knobs addon。

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

Vue JS v-html directive renders raw html

javascript

vue.js

storybook

[解决方案]