Dynamically Render Vue Html

by asemahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.0/vue.js"></script>

<div id="app">
  <textarea type="text" v-model="message"></textarea>
  <renderer :html-prop="message"></renderer>
</div>

<template id="renderer">
  <div class="body" ref="body">
  </div>
</template>

JavaScript

Vue.component('renderer', {
	template: '<div ref="body"></div>',
  props: {
  	htmlProp: { required: true },
  },
  data: function() {
  	return { temp: null };
  },
  watch: {
  	'htmlProp': function() {
    	this.render();
    }
  },
  methods: {
  	render: function() {
    	if (this.temp != null) this.temp.$destroy();
    
    	$(this.$refs.body).empty();
      $(this.$refs.body).append($('<div></div>'));
      this.temp = new Vue({
        template: '<div>' + this.htmlProp + '</div>',
        parent: this.$parent,
        data: function() { return { scope: {} }},
        created: function() { this.scope = this.$parent; console.log(this.scope.message); }
      }).$mount($('div', this.$refs.body)[0]);
    }
  },
  mounted: function() {
  	this.render();
  }
});

new Vue({
  el: '#app',
  data: {
    message: '<h1>Hello Vue.js!</h1>',
  }
});