javascript - 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 作为 Prop 传递。当我使用来自 vue js 数据的原始 html 时，它正在工作并且能够“解析”html 字符串并正确呈现它。

Answer 1

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

虽然有一种方法可以通过设置 escapeHTML to false for the knobs addon 来关闭它。 .