Vue with dynamic template and data

by Ben Clayton

HTML

<div id="app">
  <button @click="index = 0">First</button>
  <button @click="index = 1">Second</button>
  <button @click="index = 2">I work, no staticRenderFns here</button><br/><br/>
  <dynamic :template="html[index]" :data="propsData"></dynamic><br/>
  <label for="">Change Value: <input type="text" v-model="value"></label>
	<label for="">Change Data: <input type="text" v-model="data[index]"></label>
</div>

Babel + JSX

var Loading = {
	template: `<div>Loading...</div>`
}
var dynamic = {
	functional: true,
  props: {
  	template: String,
    data: { type: Object, default: () => ({}) }
  },
 	render(h, context) {
  	const template = context.props.template;
    const dynComponent = {
    	template,
      data() { return context.props.data }
    }
  	console.log(context.props.value);
    const component = template ? dynComponent : Loading;
    return h(component);
  }
};

new Vue({
  el: "#app",
  data: {
  	value: 'Foo',
    html: [
      '<div><span>First template</span> <span>{{value}}</span> <span>{{clsdata}}</span></div>',
      '<div><span>Second template</span> <span>{{value}}</span> <span>{{clsdata}}</span></div>',
      '<div>Working template, no staticRenderFns here <span>{{value}}</span> <span>{{clsdata}}</span></div>'
    ],
    data: ['temp1', 'temp2', 'temp3'],
    index: 0,
  },
  computed: {
  	propsData() { return {value: this.value, clsdata :  this.data[this.index] } }
  },
  components: {
    dynamic
  },
});