Vue中的程式設計方式渲染多個模態框在同一元件中

Question

在我的組件中，有三個帶有不同內容的彈出模態框。透過點擊特定按鈕，我需要打開對應的彈出模態框。

這是我正在做的事情 對於按鈕1 -

<s-button type="button" class="bl_btn" @click="onClickProdOpen">
      產品詳情
  </s-button>

對於這個模態框1將是

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

這裡有一個按鈕點擊方法。像這樣多個不同模態框的點擊事件。

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

那麼，如何使用switch case語句來避免多次重複模態框程式碼，只需更改內部內容元件？任何建議都會有幫助。

Answer 1

一種選擇是將每個模態框的狀態放在一個物件中。這樣，你就不需要為每個模態方塊新增一個資料屬性。

如果模態框內的內容夠相似，你可以使用v-for，以相同的方式使用索引作為鍵。

<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

#