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
{{libText}}
// what I wrote in js
Vue.component(... , {
template: ... ,
data: function () {
return ...
}
},
computed: {
libText:function(){
var str="
some html
";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
解决方案
A possible solution is:
Template:
{{{libText}}}
Notice triple {} for get raw html/text interpretation.
Javascript:
Vue.component(... , {
template: ... ,
data: function () {
return ...
}
},
computed: {
libText:function(){
// return directly html
var str="
some html
return str;
}
},
methods:{...}
});