vue.js show component after jquery ajax

You can use Conditional Rendering with the help of v-if or v-show directive:

using v-show:

<comp1 :page="page1" v-show="showComp1"></comp1>

using v-if:

<comp1 :page="page1" v-if="showComp1"></comp1>

You can set these data variables showComp1, showComp2 and others depending on the response of AJAX call, depending on which corresponding components will be rendered in the view.

v-if vs v-show

v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.

v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.

In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with just simple CSS-based toggling.

Generally speaking, v-if has higher toggle costs while v-show has higher initial render costs. So prefer v-show if you need to toggle something very often, and prefer v-if if the condition is unlikely to change at runtime.

You can use v-show for that, and just bind each component to a flag stored in data:

new Vue({
  el: "#app",
  methods: {
     makeCall(){
        this.$http.get('foo')
          .then(response => {
             // after ajax call set comp1 show flag to true
             this.show.comp1 = true;
         });
     }
  },
  data: {
    show: {
      comp1: false,
      comp2: true,
      comp3: false
    }
  }
});

Then just bind them with v-show like so:

  <comp1 v-show="show.comp1"></comp1>
  <comp2 v-show="show.comp2"></comp2>
  <comp3 v-show="show.comp3"></comp3>

here's a JSFiddle to show you how it works: https://jsfiddle.net/wp5tfe2e/