Display content from JSON inside a div

Question

I am a novice in html, javascript and vue. I am not sure if this is vue specific or can be solved using some javascript magic.

I have NodeJS based service that has UI written in VueJS. The content for the page comes from a markdown editor which the nodejs convert into html using showdown. The response from Nodejs is json and I am trying to use Vue to show it in the screen like below

 app.js (vue)

 new Vue({
   el: "#mdEditor",

   data: {
      content: '',
    },
   mounted: function() {
     this.defaultPage();
   },

  methods: {
    defaultPage: function() {
      this.$http.get('/defaultPage')
       .then((result) => {
          this.$set(this, 'content', result.data.html);
          console.log('result=', result);
         }, (err) => {
           console.log('error=', err);
       });
   }
 }
});

HTML file

  <div class="container" id="mdEditor">
<div class="col-sm-12">
  <div class="panel panel-primary">
    <div class="panel-body">
      {{content}}
    <!-- content of the md file goes here-->
    </div>
  </div>
</div>

However the contents (which is html code) is printed as text instead of html. Thanks for help in advance

Answer 1

Use the v-html attribute to render raw html. Read more in the docs here.

It's important to note that interpolating raw html like this can be a security vulnerability (please see the note in the docs).