Vue Dynamic Component

by Eugene Fedorov

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
<div>
    <component :is="flyComponent">
      <p>{{ message }}</p>

    </component>

      <button @click="addNewComponent">Load Dynamic Component</button>
  </div>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    flyComponent: null
  },
  methods: {
  	addNewComponent: function() {
    console.clear();
    console.log(this.data);
    var self = this;
    	$.get( "https://fdrv.guru/vue_comp.php", function( data ) {
				var r = JSON.parse(data.newComp);         
        self.flyComponent = {
					template: r.template,
          data () {
            return r.data
          }
        }
        
      });
    }
  }
})