Product Details For this modal 1 it will be Programmatically render multiple modal boxes in the same component in Vue-PHP Chinese Network Q&A
Programmatically render multiple modal boxes in the same component in Vue
P粉627027031
P粉627027031 2023-08-28 16:23:40
0
1
499

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 -

 Product Details 

For this modal 1 will be

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.

P粉627027031
P粉627027031

reply all (1)
P粉256487077

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.

模态框1 打开1 模态框2 打开2 模态框3 打开3
data: { modal_states: {}, }, methods: { openModal(index){ this.modal_states = {[index.toString()]:true} } },

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

    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn:Public welfare online PHP training,Help PHP learners grow quickly!