[Vuejs]-Render custom tag from REST API response

by

0👍

✅

I needed Vue version with compiler in order to use the following example:

<div id="app">
  <h3>
    Vue component creator
  </h3>
  Template
  <textarea v-model="template"></textarea>
  Options
  <textarea v-model="options"></textarea>
  <button @click="create">
    Create component
  </button>
  <component :is="resultComponent"></component>
</div>


Vue.component('test',{
    template:'<div>It works!</div>'
})
new Vue({
    el:'#app',
  data(){
    return{
        stuff:'stuff',
      template:
`<div>
  <test></test>
  <b>{{stuff}}</b>
  <div v-for="n in 10">{{n}}</div>
</div>`,
            options:
`{
  data(){
    return {stuff:'awesome'}
  }
}`,
      resultComponent:undefined
    }
  },
  methods:{
    create(){
        let component = new Function('return' + this.options)()
      component.template = this.template
      this.resultComponent = component
    }   
  }
})

The fiddle: https://jsfiddle.net/Herteby/9syt27ja/

Leave a comment