Click event gets removed when clicking button – Vue / Vuetify

I am creating a dialog with Vuetify. The button should open a dialog and that’s basically that. It’s also possible to close the dialog after finishing business. When closing the dialog in development, we can just open the dialog again. But in production environment, we cannot open the dialog more than once.

I have found the cause, or at least what I believe to be the cause of this; The click event gets removed from the DOM/Window when clicking the button the first time – ONLY in production.

This is not happening in development environment.

I had an idea, that some of the old code in our project is doing something, but can’t seem to find the culprit…

So I wanted to hear you out, if this has ever happened to anyone before? 🙂

Our tech is:

• Vue 2
• Vuetify 2.7
• some old jQuery

Let me know if you need some more code.

Modal container:

<template>
  <div>
    <v-tooltip left>
      <template #activator="{ on, attrs }">
        <v-btn
          class="o-page-sidebar__button create-project__button"
          color="#009688"
          dark
          depressed
          tile
          v-bind="attrs"
          v-on="on"
          @click="triggerModal(undefined)"
        >
          <v-icon size="16">
            fal fa-clipboard-list
          </v-icon>
        </v-btn>
      </template>
      <span>{{ translations.title }}</span>
    </v-tooltip>

    <CreateProjectModal
      v-if="showModal"
      v-bind="$attrs"
      v-model="showModal"
      :translations="translations"
      @hasEditedProject="handleHasEditedProject"
      @hasCreatedProject="handleHasCreatedProject"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    triggerModal(eventObject) {
      if (eventObject == undefined) {
        eventObject = {};
      }

      const localStorageValue = localStorage.useNewCreateProjectDialog != undefined ? localStorage.useNewCreateProjectDialog == 'true' : true;

      const openRequest = {
        Type: eventObject.type,
        ProjectID: eventObject.projectID,
        OfferID: eventObject.offerID,
        DebtorID: eventObject.debtorID,
        FitterID: eventObject.fitterID,
        ManagerID: eventObject.managerID,
        PlanningStartDate: eventObject.planningStartDate,
        PlanningEndDate: eventObject.planningEndDate
      };

      this.notification.show = false;

      if (localStorageValue) {
        const type = eventObject.type ? eventObject.type : 'CreateProject';

        openRequest.Type = this.openProjectDialogEnum.find(x => x.Name == type)?.Name;

        this.$store.dispatch('setOpenRequest', openRequest);

        this.$store.dispatch('setHasInitializedFields', {
          'MainProjectID': false,
          'OfferID': false,
          'ProjectDebtorID': openRequest.Type != 'EditProject',
          'ProjectGroupID': openRequest.Type != 'EditProject'
        });

        this.showModal = true;
      }
    }
}
</script>

Modal component:

<template>
  <v-dialog
    v-model="show"
    :class="{ 'new-create-project' : show }"
    fullscreen
    :retain-focus="false"
    hide-overlay
    persistent
    no-click-animation
    height="100vh"
    transition="dialog-bottom-transition"
    @keydown.esc="confirmClose"
  >
    {{ ... }}
  </v-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(value) {
        if (!value) {
          this.$store.dispatch('setNotifications', []);
          this.$store.dispatch('setSelectedDebtor', null);
          this.$store.dispatch('emptyErrors');
        }

        this.$store.dispatch('resetProjectData');
        this.$emit('input', value);
      }
    },
  }
}
</script>