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 template
  <div id="log">
      {{libText}}
  </div>

  // what I wrote in js
        Vue.component(...  , {
        template: ...  ,
        data: function () {
               return ...     
            }
        },
        computed: {           
            libText:function(){
                var str="<p>some html</p>";
                var div = document.createElement('div');
                div.innerHTML = str;
                return div;
            }
        },
        methods:{...}
        })

The result I get is a string "[object HTMLDivElement]" rather than a Dom. It would be greatful if anyone can help me solve this problem

tony19 · Accepted Answer · 2022-07-14 23:49:17Z

60

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

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

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

edited Jul 14, 2022 at 23:49

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 13, 2017 at 14:09

Collier Devlin

1,0299 silver badges8 bronze badges

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

2 Comments

Hùng Nguyễn Over a year ago

It works perfectly even if you want to leave it as string. Thanks!

Rafael Junio Xavier Over a year ago

worked on Vue 3 too, thanks!

g.annunziata · Accepted Answer · 2016-07-18 08:10:56Z

7

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:{...}
});

answered Jul 18, 2016 at 8:10

g.annunziata

3,3061 gold badge26 silver badges27 bronze badges

Collectives™ on Stack Overflow

convert string to Dom in vuejs

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related