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，而是由故事书引起的 -旋钮text转义了 HTML。

不过，有一种方法可以关闭此功能，方法是将旋钮插件设置escapeHTML为false。