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();
    var self = this;
    	$.get( "https://fdrv.guru/vue_comp2.php", function( data ) {
//				$('header').append($(data)[0]);
        $("body").append($("<script />", {
          html: data
        }))
				self.flyComponent = newComp;
      });
    }
  }
})