I have a vue frontend, where I have to add snippet for one of the additional api call from backend. The vue file was working fine until I added the snippet to accomodate the api request coming from backend. The npm run serve doesnt throw any errors , but when I click on the module on the local frontend associated with vue file I am working on, it gives the run time error. The error is following.

Uncaught runtime errors:
×
ERROR
Cannot read properties of undefined (reading 'backdrop')
TypeError: Cannot read properties of undefined (reading 'backdrop')
    at Modal._initializeBackDrop (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:2510:39)
    at new Modal (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:2442:27)
    at Modal.getOrCreateInstance (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:704:41)
    at HTMLButtonElement.eval (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:2682:22)
    at HTMLDocument.handler (webpack-internal:///./node_modules/bootstrap/dist/js/bootstrap.esm.js:382:19)

Many articles suggested it might be the issue the DOM not fully loaded and some suggested its the bootstrap issue.

My initial code prior having issues (changes in the template section not shown as it didnt affect the code):

<script>
import StudyReportForm from "../forms/StudyReportForm";
import StudyReportEditForm from "../forms/StudyReportEditForm";

export default {
  name: "ManageStudyReportsModal",
  components: { StudyReportEditForm, StudyReportForm },
  data() {
    return {
      addCollapse: null,
      editCollapse: null,
      isUpdating: false,
      studyreports: [],
      selectedReports: [],
      meta: {
        totalItems: 0,
        totalPages: 0,
        currentPage: 1,
        pageSize: 10,
      },
      report: null,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    toggleCollapseAddForm() {
      this.isUpdating = false;
      if (this.editCollapse) {
        this.editCollapse.hide();
      }
      if (!this.addCollapse) {
        this.addCollapse = new this.$bootstrap.Collapse(
          document.getElementById("addNewStudyReports")
        );
      }
      this.addCollapse.toggle();
    },
    collapseAddForm(type) {
      this.isUpdating = false;
      if (!this.addCollapse) {
        this.addCollapse = new this.$bootstrap.Collapse(
          document.getElementById("addNewStudyReports")
        );
      }
      if (type === "show") {
        this.addCollapse.show();
        if (this.editCollapse) {
          this.editCollapse.hide();
        }
      } else {
        this.addCollapse.hide();
      }
    },
    collapseEditForm(type) {
      if (!this.editCollapse) {
        this.editCollapse = new this.$bootstrap.Collapse(
          document.getElementById("editStudyReports")
        );
      }
      if (type === "show") {
        this.editCollapse.show();
        if (this.addCollapse) {
          this.addCollapse.hide();
        }
      } else {
        this.editCollapse.hide();
      }
    },
    collapseEditStudyReportsForm() {
      this.collapseEditForm("hide");
      this.report = {};
      this.isUpdating = false;
    },
    reportUpdated() {
      this.collapseEditStudyReportsForm();
      this.getData();
      this.$emit("reportUpdated");
    },
    cancelUpdate() {
      this.collapseEditStudyReportsForm();
    },
    reportAdded() {
      this.addCollapse.hide();
      this.getData();
      this.$emit("reportUpdated");
    },
    async deleteStudyReports(id) {
      await this.$confirm({
        message: `Are you sure?`,
        button: {
          no: "No",
          yes: "Yes",
        },
        callback: (confirm) => {
          if (confirm) {
            this.$repository.studyReports
              .delete(id)
              .then(() => {
                this.getData();
                this.$emit("reportUpdated");
                this.$toast.success("Report deleted");
              })
              .catch(() => {
                this.$toast.error("Deletion Failed");
              });
          }
        },
      });
    },
    editStudyReports(report) {
      if (this.addCollapse) {
        this.collapseAddForm("hide");
      }
      this.isUpdating = true;
      this.report = report;
      this.collapseEditForm("show");
    },
    async getData(page = 1) {
      this.meta.currentPage = page;

      let params = `?page_size=${this.meta.pageSize}&ordering=-uploaded_at`;

      if (this.meta.currentPage > 1) {
        params += `&page=${this.meta.currentPage}`;
      }

      await this.$repository.studyReports.filter(params).then((res) => {
        this.studyreports = res.data.results;
        this.meta.totalItems = res.data.count;
        this.meta.totalPages = Math.ceil(res.data.count / 10);
      });
    },
  },
};
</script>

I added the following change to the script file to (showing the added part only)…Its to accomodate the patch request sent to the backend just to update in_draft: false. Here I modified the mounted method and also added initializeModals() function.

Updated code: (added part only)

import { Collapse } from 'bootstrap';
export default {
........//code //.................
mounted() {
    this.$nextTick(() => {
      this.getData();
      this.initializeModals();
    });
  },
  methods: {
    initializeModals() {
      const addNewStudyReportsElem = document.getElementById("addNewStudyReports");
      if (addNewStudyReportsElem) {
        this.addCollapse = new Collapse(addNewStudyReportsElem, { toggle: false });
      }

      const editStudyReportsElem = document.getElementById("editStudyReports");
      if (editStudyReportsElem) {
        this.editCollapse = new Collapse(editStudyReportsElem, { toggle: false });
      }
    },

//………..added snippet for api below//………….

async handleCheckboxChange(reportId, isChecked) {
      this.isUpdating = true;
      try {
        if (isChecked) {
          // Check if the report is already in the selectedReports list
          if (!this.selectedReports.includes(reportId)) {
            this.selectedReports.push(reportId);
          }

          // Publish the report if checked
          await this.$repository.studyReports.edit({ in_draft: false }, reportId);
          this.$toast.success('Report published successfully.');
        } else {
          // Remove the report from the selectedReports list
          this.selectedReports = this.selectedReports.filter(id => id !== reportId);
        }
      } catch (error) {
        this.$toast.error(`Error: ${error.response?.data?.error || error.message}`);
      } finally {
        this.isUpdating = false;
      }
    }
  },
};