CODEWITHSUNDEEP
javascripthtmlvue.js
Madhan Kumar R
Madhan Kumar R

Reputation: 63

How to display html page (html code stored in variable)

<Template>
   {{variable}}
</template>

<script>
 export default {
  data(){
   return {
    variable: "<ul><li>Sample</li><li>text></li></ul>"
   }
  }
 }
</script>

Expected result:

Actual Result: <ul><li>Sample</li><li>text</li></ul>

I need to display the html page. Where html codes are stored in the variable. for example, I have given the simple code above. Now the problem is the page takes the variable as string while displaying.

Upvotes: 1

Views: 793

Answers (2)

Pulsara Sandeepa
Pulsara Sandeepa

Reputation: 945

You can try this way, it will help:

--JS code --

new Vue({
    el: '#app',
  data: {
    variable: null,
  },
  created() {
    this.variable=`<ul><li>Sample</li><li>text</li></ul>`;
  },
});

-- HTML code --

<body>
   <Template>
   <div id="app">
   <div v-html="variable"></div>
   </div>
   </Template>
</body>

Upvotes: 1

wangdev87
wangdev87

Reputation: 8751

use v-html.

<Template>
  <div
     v-html="variable"
  </div>
</template>

Upvotes: 1

Related Questions