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

Question

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

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

Expected result:

Sample
text

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.

topdev87 · Accepted Answer · 2020-10-27 03:07:03Z

1

use v-html.

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

answered Oct 27, 2020 at 3:07

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pulsara Sandeepa · Accepted Answer · 2020-10-27 03:32:42Z

1

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>

answered Oct 27, 2020 at 3:32

Pulsara Sandeepa

94311 silver badges26 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related