Vue problem with Tabs

Hi guys Im having problem with Vue js, Im trying to make tabs with modal, so that each tab has its own modal... But for some reason if I open 3 tabs and on 1st tab open dialog, then close that 1st tab, the dialog will stay open on the next tab :(

Here is my Issue in gif:

And here is code Im using : CodeSandbox fiddle

Thanx in advance :)

I dont think shouldShowModal in ModalDialog.vue keeps in sync with changes happening in props.

What you've done assigns this.$props.show as the default value to this.$data.shouldShowModal during component initialization. What I'd suggest is to make shouldShowModal as computed property that returns this.$props.show so that your modal visibility will be in sync with props.

thank you very much for replying :)) .. Yes I think it doesnt not on that next tab, but for every other it does .... Im not sure If I understand you correctly sorry about that but I should make shouldShowModal a computed property inside of ModalDialog like this computed: { shouldModal() { return this.show; }, }, but it doesnt change anything I still see dialog when tab is switched :(

Okay, then the issue still persists. My guess is that your closed Tab component is not destroyed even though it is invisible. This makes the modal present inside that closed Tab still active. Check the no. of Tab components before and after closing a tab in Vue Tools.

Thread

Vue problem with Tabs

Responses(1)

Recent threads

Search Hashnode

Vue problem with Tabs

Responses(1)

Recent threads