how to load vuejs dynamic component from another component

Question

I'm using laravel and vuejs2 and as you know we can load components using dynamic components and current view var

and now I loaded a component using this method and now I want load another component from this component which I loaded (this component will remove and another will replace with it)

how can I do that?

import example from './components/Example.vue';
import example2 from './components/Example2.vue';
import login from './components/Login.vue';

Vue.component('example', example);
Vue.component('example2', example2);
Vue.component('login', login);



const app = new Vue({
el: '#content',
data: {
    currentView: '',
    show: true
},
methods:{
    example1: function(){ this.currentView =  'login'; },
    example2: function(){ this.currentView =  'example2'; },
    noview: function(){ this.currentView =  ''; }
}
});

and

<component :is='currentView'>   </component>

Bert · Accepted Answer · 2017-04-25 02:31:21Z

Emit an event from the the components indicating the component to load, and listen to that event in the Vue.

Imagine that the following components are the components you are importing to your main file. Note the $emit when the buttons are clicked.

const Example1 = {
  template:`
    <div>
      <h1>Example One</h1>
      <button @click="$emit('change-component', 'example 2')">Load Example Two</button>
    </div>
  `
}

const Example2 = {
  template:`
    <div>
      <h1>Example Two</h1>
      <button @click="$emit('change-component', 'example 1')">Load Example One</button>
    </div>
  `
}

Then in your Vue template, listen for the change-component event.

<component :is='currentView' 
         @change-component="onChangeComponent">
</component>

And in your Vue, handle the event and change currentView.

new Vue({
  el:"#content",
  data: {
      currentView: Example1,
      show: true
  },
  methods:{
    onChangeComponent(comp){
      if (comp === "example 1")
        this.currentView = Example1
      if (comp === "example 2")
        this.currentView = Example2
    }
  }
})

Example.

Collectives™ on Stack Overflow

how to load vuejs dynamic component from another component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related