Programmatically render multiple modal boxes in the same component in Vue

Question

In my component, I have three popup modals with different content. By clicking on a specific button, I need to open the corresponding popup modal.

This is what I'm doing For button 1 -

<s-button type="button" class="bl_btn" @click="onClickProdOpen">
      Product Details
  </s-button>

For this modal 1 will be

<s-modal v-model="isShowPopup1" :title="$t('LBL_PROD_CONT')"
    <my-component-one
         :pageId ="this.$options.name"
         :popupDefaultTab="popupOpenDefaultTab"
         :onClickClose="onClickclose"
    />

Here is a button click method. Click events for multiple different modal boxes like this.

methods: {
  onClickProdOpen() {
   this.isShowPopup1 = true;
   this.popupOpenDefaultTab = 0;
}
}

So, how can I use a switch case statement to avoid repeating the modal box code multiple times and just change the inner content component? Any suggestions will be helpful.

Answer 1

One option is to put the state of each modal in an object. This way, you don't need to add a data attribute to each modal.

If the content inside the modal is similar enough, you can use v-for, using the index as the key in the same way.

<b-modal v-model="modal_states[1]">模态框1</b-modal>
    <b-button @click="openModal(1)">打开1</b-button>
    
    <b-modal v-model="modal_states[2]">模态框2</b-modal>
    <b-button @click="openModal(2)">打开2</b-button>
    
    <b-modal v-model="modal_states[3]">模态框3</b-modal>
    <b-button @click="openModal(3)">打开3</b-button>

data: {
    modal_states: {},
  },
  methods: {
    openModal(index){
      this.modal_states = {[index.toString()]:true}
    }
  },

https://codepen.io/timfranklin/pen/abWEwLy?editors=1111