v-html not rendering dynamic HTML data inside div

Viewed 1834

I have a standalone vue.js app , its converted from angular 1 + bootstrap to vue+bootstrap. In angular i used sanitizer to render ajax html data inside component , in vue what is the simple alternative to that ?

HTML>

   <div class="detailsText" v-if="object.definition != ''" data-html="true" data-toggle="tooltip" data-placement="bottom" v-bind:title="strip(object.definition)" v-html="object.definition"></div>

Javascript >

var vueobject = new Vue({
el: '#compactViewController',
data: {
    OBJECTS: [],
    CURRENT_PAGE: 1,
    PERMISSION_KEYS: parent.OPTION_PERMISSIONS,
    filterText: "",
    pageSize: pageSize
}
...

HTML Tags <div>,<b> not rendered enter image description here

new Vue({
 el: "#app",
  data: {
   channel: "<b>hello world!</b>"
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<div id="app">
  <div class="channels">
    TEST: <span v-html="channel"></span>
  </div>
</div>

It works fine when we use v-html with local html value , same will not work with raw html coming from API call.

0 Answers
Related