Prepend and Append to v-html in vue.js
Feb 09, 2020
1 minute
In the thing I’m currently working on at Mamamia, the content for the page is coming from a WYSIWYG editor. The section of the page where it appears has a title that is planned to be hardcoded in to the markup. I didn’t want to add an extra div
just to display the content of the v-html
. It occured to me that I could easily append or prepend additional markup to it in the Vue template. However it appears that this can’t be done with v-text
. The codepen below also uses this technique.
<div v-html="`<h2>My Cool H2 Title</h2>${wysiwyg_data_from_api}`></div>"
See the Pen Append & Prepend to v-html by James (@jamcgrath) on CodePen.