Vue JS v-html指令呈现原始html [解决方案]

问题描述

这是我的组件的外观

<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字符串并正确呈现它。

解决方法

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

不过，可以通过设置escapeHTML to false for the knobs addon来关闭此功能。

[解决方案]

要呈现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代码，以便在Vuejs上以V-html呈现

javascript storybook vue.js