In my project using Vuetify, I have implemented a dialog that opens when a button is clicked. The dialog can be closed after completing the required actions. However, in the production environment, the dialog cannot be reopened more than once due to the removal of the click event from the DOM/Window on the first click.
This issue does not occur in the development environment and I suspect it may be related to some outdated code in our project. I am currently unable to identify the exact cause...
I'm seeking advice or feedback from anyone who has experienced a similar situation before :)
Our technology stack includes:
- Vue 2
- Vuetify 2.7
- some old jQuery
Feel free to ask for more code snippets if needed.
Snippet of Modal container:
<template>
// Code snippet here
</template>
<script>
// JavaScript logic here
</script>
Snippet of Modal component:
<template>
// Code snippet here
</template>
<script>
// JavaScript logic here
</script>
UPDATE: Upon further investigation, it seems that the entire component is re-rendered when the dialog is opened.
UPDATE: Removing components loaded in the dialog's tabs resolves the error. It appears something might be incorrect with how these components are loaded. Please review the following snippet for insight:
// Tab loop example
<v-tabs
ref="tabs"
// More code here
>
<v-tab
v-for="(tab, i) in mappedTabs"
// Additional attributes
>
// Content here
</v-tab>
</v-tabs>
<v-tabs-items
v-model="currentTab"
// More attributes
>
<v-card-text class="fill-height">
<v-tab-item
v-for="(tab, i) in mappedTabs"
// Additional attributes
>
<component
// Component details
/>
</v-tab-item>
</v-card-text>
</v-tabs-items>
Here is an example of a tab being looped over:
{
name: this.translations.tabProjectInformation,
hasErrors: this.$store.getters.hasProjectInformationErrors,
icon: 'fal fa-clipboard-list',
component: 'ProjectInformation'
},