Vue Dynamic Template
HTML
<div id="vue">
<textarea v-model="dataComponent.template"></textarea>
<component :is="dataComponent"/>
</div>
CSS
textarea{
width:100%;
min-height:100px;
}
JavaScript
Vue.component('hello', {
template:`<div>Hello, world!</div>`
})
new Vue({
el:'#vue',
data(){
return {
dataComponent: {
template:`<div>
<h1>Dynamic {{customer.first_name}}</h1>
<hello/>
</div>`,
data() {
return {
customer: {
first_name:'',
},
}
},
}
}
}
})