pupulate component via click

by robert chang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-beta.7/vue.min.js"></script>
<div id="app">
    <pcom v-for="comdata in comdatas" :comproperty="comdata.comproperty"></pcom>
    <button @click="populateData">populate components source data</button>
</div>

JavaScript

Vue.component('pcom', {
	props: ['comproperty'],

  created: function(){
  	var tpl = '<div>'+this.comproperty+'</div>';
		var res = Vue.compile(tpl,{}, this);
    this.$options.render = res.render;
    this.$options.staticRenderFns = res.staticRenderFns;
		console.log(this.$options);
  }
});

new Vue({
	el: '#app',
  data: {
    	comdatas: []
  },
  methods: {
  	populateData: function(){
    console.log('clicked')
    	this.comdatas = [
      	{comproperty: 'property for pcom instance 1'},
				{comproperty: 'property for pcom instance 2'}
      ]
    }
  }
})