在同一个组件中以编程方式呈现多个模式 - Vue答案

【问题标题】：Rendering multiple modals programmatically in same component- vue在同一个组件中以编程方式呈现多个模式 - Vue
【发布时间】：2021-07-25 07:28:40
【问题描述】：

在我的组件中，有三个具有不同内容的弹出模式。通过单击特定按钮，我必须打开该弹出模式。

我正在做这样的事情 按钮 1 -

<s-button type="button" class="bl_btn" @click="onClickProdOpen">
      Product Details
  </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 语句不重复模态代码多次，只改变内部内容组件？任何建议都会有所帮助。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

一种选择是将每个模态的状态放入一个对象中。这样你就不需要为每个模式都有一个数据属性。

如果模态框内的内容足够相似，您可以使用 v-for，以相同的方式使用索引作为键。

    <b-modal v-model="modal_states[1]">Modal 1</b-modal>
    <b-button @click="openModal(1)">Open 1</b-button>
    
    <b-modal v-model="modal_states[2]">Modal 2</b-modal>
    <b-button @click="openModal(2)">Open 2</b-button>
    
    <b-modal v-model="modal_states[3]">Modal 3</b-modal>
    <b-button @click="openModal(3)">Open 3</b-button>

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

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

【讨论】：