How do I render data inside an html string in Vue, before it is displayed? - vue.js

Question

I have an html string that contains some variables wrapped in {{}}. Is there a way to trigger the parsing of the html to replace {{}} with values that are present in the teamplate already
<div v-html="desc"></div>
desc = "<p>Some text {{aVar}}</p>"
I would like to be able to do something like
v-html="parse(desc)"
and {{aVar}} be replaced with the actual value that is available
Hopefully there is Vue method to do this, but I can definitely use a custom method and replace the values myself.
Thank you

Answer 1

For now I solved it with
function parseHtml(html = "") {
const expose = {
player,
};
return html.replace(/{{(.+?)}}/g, (_, g) => {
return _get(expose, g);
});
}
where _get is the lodash _.get

Answer 2

Like this?
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
const parse = (text) => (`<span style=\"color:red\">${text}<span>`)
</script>
<template>
<input type="text" v-model="msg">
<div v-html="parse(msg)"></div>
</template>

Answer 3

With inspiration from your example #orbitory
What about this?
Options API
<script>
export default {
data() {
return {
template: `<p> {{ message }} {{ message2 }}</p>`,
message: "hello",
message2: "world",
};
},
methods: {
parse(html) {
return html.replace(/{{(.+?)}}/g, (_, g) => {
return this[g.trim()];
});
},
},
};
</script>
<template>
<input v-model="message">
<input v-model="message2">
<div v-html="parse(template)" />
</template>
Demo with reactive input fields example.
https://codesandbox.io/s/how-do-i-render-data-inside-an-html-string-in-vue-before-it-is-displayed-x8oq1?file=/src/App.vue
Composition API
<script setup>
import { ref } from 'vue'
let template = "<p> {{ message }} {{ message2 }} </p>"
let message = ref('hello')
let message2 = ref('world')
let data = { message, message2 }
function parse(html) {
return html.replace(/{{(.+?)}}/g, (_, g) => {
return this[g.trim()].value;
});
}
parse = parse.bind(data)
</script>
<template>
<input v-model="message">
<input v-model="message2">
<div v-html="parse(template)"></div>
</template>
Demo with reactive input fields - based on #tauzN example.
link