I have this js code:
var tags = [
'b',
'i'
'u',
];
var text = 'some simple text';
tags.forEach(tag => {
text = '<' + tag + '>' + text + '</' + tag + '>';
});
//print wrapped "text" variable on the page (Upd:) like: <b><i><u>Some text</u></i></b>
How to convert this to vue component/template?
You have two options:
<div v-html="xxx" /> Docs: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTMLIn Your case first option is better choice. Dynamics components are actually designed for Vue components, not raw html tags - but it's possible to use them this way if You really need to.
v-html is the simplest way but doesn't look like the best practice.
The acceptability of v-html depends on the source of markup data. It shouldn't be used with unsanitized, user-defined HTML, doing this is dangerous and may result in script injections.
This is the case for render function, it allows to build a hierarchy of tags that will be rendered into DOM elements:
export default {
render(h) {
return tags.reduceRight(
(wrapper, tag) => h(tag, [wrapper]),
text
);
}
};
render function over v-html to achieve the goal. So, I can mark this answer as accepted. Thank you!Create a computed property called tagged and render it inside the template using v-html directive :
var app=new Vue({
el: "#app",
data() {
return {
text: "some text"
};
},
computed: {
tagged() {
var tags = [
'b',
'i',
'u',
];
tags.forEach(tag => {
this.text = '<' + tag + '>' + this.text + '</' + tag + '>';
});
return this.text;
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-html="tagged"></div>
</div>Second solution is to create a component with the 3 tags and pass the text as prop :
Vue.component('bui-tag', {
props: ['text'],
template: `<b><u><i>{{text}}</i></u></b>`
})
var app = new Vue({
el: "#app",
data() {
return {
text: "some text"
};
},
computed: {
tagged() {
var tags = [
'b',
'i',
'u',
];
tags.forEach(tag => {
this.text = '<' + tag + '>' + this.text + '</' + tag + '>';
});
return this.text;
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<bui-tag :text="text" />
</div>v-html the best option?
tags array can contains different values, for example, ['b', 'u'] or ['b', 'i'].