convert string to Dom in vuejs

Question

recently I want to convert a stirng to Dom in a vue component, but it does\'t work as my expectation. My code looks like this:

  // what I wrote in the templ         


        

Answer 1

If you are using Vue 2, use the v-html directive:

<div v-html="yourVariable"></div>

https://vuejs.org/v2/api/#v-html

Answer 2

What you are trying to do doesn't make any sense. This is not how the mustaches work. They just output strings. No wonder your output is a string.

If you want to create a new component you will need a constructor AND a DOM element, according to the following equation.

DOM el + VueComponent constructor = Vue Component

You should compose the constructor in some hook (Vue.extend), for example the created hook. Then create the element exactly like you did. Then do something like:

var myComponent = new myConstructor({el: myElement})

And voila' you're done!

Answer 3

A possible solution is:

Template:

<div id="log">
    {{{libText}}}
</div>

Notice triple {} for get raw html/text interpretation.

Javascript:

Vue.component(...  , {
    template: ...  ,
    data: function () {
           return ...     
        }
    },
    computed: {           
        libText:function(){
            // return directly html
            var str="<div><p>some html</p></div>";
            return str;
        }
    },
    methods:{...}
});