JSFiddle - React, Tailwind, and code Playground

Trying to force vue to render a template string passed in as a prop.

by asemahle

HTML

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

<div id="app">
  <input type="text" v-model="message">
  <outer :message="message"></outer>
</div>

<template id="outer">
  <div class="outer">
    I am the outer widget
    <renderer :html-prop="message" :scope="self"></renderer>
  </div>
</template>

JavaScript

var _toString = function(val) { 
	return val == null ? '' : typeof val === 'object' ? JSON.stringify(val, null, 2) : String(val);
};

Vue.component('outer', {
	template: "#outer",
  props: ['message'],
  data: function() { return { self: null }},
  created: function() { this.self = this; },
});

Vue.component('renderer', {
	mixins: [],
	props: {
  	htmlProp: { required: true },
    scope: { required: true }
  },
  render: function(h) {
  	console.log(this);
  	return Vue.compile('<div>' + this.htmlProp + '</div>').render.bind(this.$root)();
  },
});

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