Programmatically render multiple modal boxes in the same component in Vue
P粉627027031
2023-08-28 16:23:40
<p>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. </p>
<p>This is what I'm doing
<strong>For button 1 -</strong></p>
<pre class="brush:php;toolbar:false;"><s-button type="button" class="bl_btn" @click="onClickProdOpen">
Product Details
</s-button></pre>
<p><strong>For this modal 1 will be </strong></p>
<pre class="brush:php;toolbar:false;"><s-modal v-model="isShowPopup1" :title="$t('LBL_PROD_CONT')"
<my-component-one
:pageId ="this.$options.name"
:popupDefaultTab="popupOpenDefaultTab"
:onClickClose="onClickclose"
/></pre>
<p><strong>Here is a button click method. Click events for multiple different modal boxes like this. </strong></p>
<pre class="brush:php;toolbar:false;">methods: {
onClickProdOpen() {
this.isShowPopup1 = true;
this.popupOpenDefaultTab = 0;
}
}</pre>
<p><s-modal is the custom modal box part, the content will be different. So, I repeated this modal code and just changed the content, i.e. passed different child components (MyComponentOne, MyComponentTwo...). </p>
<p>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. </p>
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.
https://codepen.io/timfranklin/pen/abWEwLy?editors=1111