Restituer par programme plusieurs boîtes modales dans le même composant dans Vue

Question

Dans mon composant, j'ai trois modaux contextuels avec un contenu différent. En cliquant sur un bouton spécifique, je dois ouvrir la fenêtre contextuelle correspondante.

C'est ce que je fais Pour le bouton 1 -

<s-button type="button" class="bl_btn" @click="onClickProdOpen">
      détails du produit
  </bouton s>

Pour ce modal 1 sera

Voici une méthode de clic sur un bouton. Cliquez sur les événements pour plusieurs boîtes modales différentes comme celle-ci. 
méthodes : {
  onClickProdOpen() {
   this.isShowPopup1 = vrai ;
   this.popupOpenDefaultTab = 0 ;
}
}

Alors, comment puis-je utiliser une instruction switch case pour éviter de répéter le code de la boîte modale plusieurs fois et simplement modifier le composant de contenu interne ? Toutes les suggestions seront utiles. 

Answer 1

Une option consiste à mettre l'état de chaque modal dans un objet. De cette façon, vous n'avez pas besoin d'ajouter un attribut de données à chaque modal.

Si le contenu à l'intérieur du modal est suffisamment similaire, vous pouvez utiliser v-for, en utilisant l'index comme clé de la même manière.

<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