html tags surrounded with " " not rendering

Question

When I am checking with dev tools in chrome I am getting this in my page

<span>
 "<b> test data </b>"
</span>

The html tags are not working like this. How can I modify this string so that the html tags will work. The data "<b> test data </b>" is comming from a $.Ajax request to the server. The <b> tags are not rendering and I am getting plain text.

        var v = new Vue({
    el: ..,
    data : {
        rows: []
    },
    mounted: function() {
     var self = this;
    $.ajax({
           type: 'POST',
           url:  ...,
           data: {},
         contentType: 'application/json; charset=utf-8',
        dataType : 'json',
        success : function(data) {
          var json_data = JSON.parse(data.d);
         self.rows=json_data
        },
        error: function() {}
        })
}
})

I am iterating the data as follows

<tr v-for= "row in rows">
  <td>{{row.question}}</td>
<tr>

update

This seems to be working for me. Can anyone please tell if this code is valid?

<tr v-for ="row in rows">
  <td> <span v-html="row.question"></span></td>
</tr>

Thanks

Answer 1

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive .

Answer 2

If it's coming from a server and you are adding it to the DOM with javascript, you'll want to set innerHTML as it will treat it as a DOM object. if you set the span innerText it will treat it as a string and the tags will not render correctly.