HTML isn't interpreted when defined as data/method/computed property

[sarahdayan]

When using HTML directly in template, it's properly interpreted. When returning content with HTML from data/a method/a computed property, it's not.

In other words, this works:

<template>
  <v-runtime-template :template="template"></v-runtime-template>
</template

<script>
export default {
  data() {
    return {
      myVar: 'Hello'
    }
  },
  computed: {
    template() {
      return `<my-component><em>{{ myVar }}</em></my-component>`
    }
  }
}
</script>

But this doesn't:

<template>
  <v-runtime-template :template="template"></v-runtime-template>
</template

<script>
export default {
  data() {
    return {
      myVar: `<em>Hello</em>`
    }
  },
  computed: {
    template() {
      return `<my-component>{{ myVar }}</my-component>`
    }
  }
}
</script>

Is this a bug or is it a technical limitation? And if this is the latter, is there a way around it?

Thanks in advance!

[alexjoverm]

Hi! Technical limitation, since that happens out of the context of this plugin, just in plain Vue.

In Vue you have to use v-html in order to interpret html:

export default {
  data() {
    return {
      myVar: `<em>Hello</em>`
    }
  },
  computed: {
    template() {
      return `<my-component><div v-html="myVar"></div></my-component>`
    }
  }
}