CODEWITHSUNDEEP
javascriptvue.jsstorybook
Nikola Mitic
Nikola Mitic

Reputation: 1482

v-html directive renders raw html

Here is how my component looks like

<template>
 <div v-html="someHtml"></div>
</template>

 <script>
 export default {
   name: "test",
   props: {
    someHtml: String,
   },
 }
 </script>

The way component is being used in storybooks:

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 is always html raw string like this ==>

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

Docs are clear about the usage, and still it is not working for me.

I am passing raw html as a prop. When I am using raw html from vue js data, then it is working and is able to "parse" html string and renders it properly.

Upvotes: 2

Views: 14953

Answers (2)

Mohamed Raza
Mohamed Raza

Reputation: 953

[ Solution ]

To render a v-html follow the steps. 1.Your template should look like this

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

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

this should work fine. HTML codes should be defined in the data object in-order to render in V-html on Vuejs

Upvotes: 2

Laura
Laura

Reputation: 3373

This is not a problem with v-html, but caused by storybook - the text knob escapes HTML.

There is a way to turn this off though, by setting escapeHTML to false for the knobs addon.

Upvotes: 5

Related Questions