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

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

orbitory · Accepted Answer · 2021-09-19 18:44:11Z

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

answered Sep 19, 2021 at 18:44

orbitory

1,1205 gold badges17 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tauzN · Accepted Answer · 2021-09-19 17:01:40Z

0

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>

edited Sep 19, 2021 at 17:01

answered Sep 19, 2021 at 16:52

tauzN

7,4872 gold badges22 silver badges23 bronze badges

3 Comments

orbitory Over a year ago

Well not sure, my actual hello world text is something like Hello World! {{test.var1}} and I want to replace {{test.var1}} with the value inside test = {var1: "some var 1 text" }

tauzN Over a year ago

That is not possible with Vue.

orbitory Over a year ago

looks like dynamic components can make it work, just not sure how. Examples show did not work for me but still working on it(or a custom parser)

Kunukn · Accepted Answer · 2021-09-20 11:31:41Z

0

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

edited Sep 20, 2021 at 11:31

answered Sep 19, 2021 at 20:42

Kunukn

2,2361 gold badge17 silver badges17 bronze badges

2 Comments

orbitory Over a year ago

I am using the composition api, .this is not available for me so had to expose some vars. Maybe there is another way to expose this but I think just having a separate object might be better. For me the object path looks like game.player.name or oponent.endurance

Kunukn Over a year ago

I have updated with a Composition API example also. @orbitory

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related