How to implement switching to other components in a modal window?

Question

Vue.js

I will import a component in order to implement a toggle on click

<checkPhone
      v-show="isModalVisible"
      @close="closeModal" />
<Forgotpass
      v-show="isModal_Pass"/>

  components: { Forgotpass, checkEmail},
    data() {
      return {
     
        // isModalVisible_pass:false,
        isModalVisible:false,
       
      }
    },
method:{
  showModal_Pass(){
        isModalVisible_Pass = true
      },
      showModal() {
        this.isModalVisible = true;

      },
      closeModal() {
        this.isModalVisible = false;

      },
}.

how to implement it otherwise

Answer 1

There is such a property, is, you specify a component in it and there are no problems. And in the necessary methods, change this currentComponent to the component that you want to show. Here is an example sketched https://jsfiddle.net/set9x5fj/

<div id="app">
  <h2>Toster</h2>
  <Component :is="currentComponent"></Component>
  <input type="button" @click="showComp1" value="showComp1">
  <input type="button" @click="showComp2" value="showComp2">
</div>

Vue.component("comp1", {
  template: "<div>Hello from comp1</div>"
});
Vue.component("comp2", {
  template: "<div>Hello from comp2</div>"
});
new Vue({
  el: "#app",
  data: {
     currentComponent: "comp1"
  },
  methods: {
  	showComp1() {
    	this.currentComponent = "comp1";
    },
    showComp2() {
    	this.currentComponent = "comp2";
    }
  }
})