Vue JS v-html directive renders raw html

user_5794392 0
Viewed 7214

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>

I am aware that this might get a lot of downvotes but I can not find a way to make this work. 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.

storybook vue.js javascript
2 Answers
user_15774530

[ 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

user_110436760
Related