James McGrath

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.