I have vue template data as string. For example,
String s = "<div>{{myData}}</div>"
And now I want to render in my already defined vue ponent.
<template>
<div>
HERE I NEED TO PLACE THE STRING
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data: {
myData: "IRONMAN"
},
}
</script>
Now I want the output as IRONMAN
How can i achieve this? Pleas help. Thanks
I have vue template data as string. For example,
String s = "<div>{{myData}}</div>"
And now I want to render in my already defined vue ponent.
<template>
<div>
HERE I NEED TO PLACE THE STRING
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data: {
myData: "IRONMAN"
},
}
</script>
Now I want the output as IRONMAN
How can i achieve this? Pleas help. Thanks
Share Improve this question asked Sep 12, 2019 at 7:20 bCliksbCliks 2,9787 gold badges31 silver badges52 bronze badges 3-
2
this.template = Vue.pile('<div>{{myData}}</div>').renderlooks promising. source – Roland Starke Commented Sep 12, 2019 at 7:24 - 1 Is there any reason to make the div not an child pontent itself? – Sebastian Commented Sep 12, 2019 at 7:25
-
1
From where is this
String sing? – void Commented Sep 12, 2019 at 7:26
1 Answer
Reset to default 8You can have a single file ponent and do this - I have one called Dynamic.vue which accepts a HTML string - I use this to allow the users to generate their own templates and the bindings all match up properly, something like:
<script>
export default {
data () {
return {
someVar: 'Test'
}
},
props: {
templateHtml: {
templateHtml: true,
type: String
}
},
created () {
this.$options.template = this.templateHtml
}
}
</script>
If you were to call it like:
this.htmlData = '<div>Hello - {{{someVar}}</div>'
....
<my-dynamic-ponent :template-html="htmlData" />`
You would see the output
Hello Test
You would then omit the <template> part in the SFC.
Note: In order for this to work, you must also have the Vue Compiler included in your project (as this handles piling the SFC into render functions which Vue uses to display data).
This link: https://v2.vuejs/v2/guide/installation.html#CLI can give more information about including the Vue Compiler.