Vue 3，Bootstrap 5 无法读取未定义'backdrop'的属性

Question

我试图使用ve3 (Vite)和Bootstrap 5来创建一个由代码调用的模态。但是，当从其父模块打开模态时，会抛出一个错误。

我已经安装并包含了bootstrap:

import bootstrap(main.js)

import bootstrap/dist/js/bootstrap不改变任何东西

我已经创建了一个简单的模态，它监听一个prop，然后打开模态。

打开后，出现错误:Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'backdrop')

<template>
<div class="modal" tabindex="-1" id="errModal" aria-labelledby="ErrorModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Error {{ this.occurred }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="ErrorModalLabel"></button>
</div>
<div class="modal-body">
<p>{{ this.error_message }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from "bootstrap"
export default {
props: {
occurred: String,
error_message: String,
show: Boolean,
},
components: {
myModal: null
},
data() {
return {
}
},
methods: {
},
mounted() {
this.myModal = new Modal(document.getElementById('errModal'))
},
watch: {
show: function (newVal, oldVal) { // watch it
this.cam_prop = newVal.properties
},
}
};
</script>

从父节点调用:

<RegIdentErrorModalVue id="#ErrModal" :show="this.error" :occurred="'Identification'" :error_message="this.error_text">
</RegIdentErrorModalVue>

用new bootstrap.Modal创建模态不工作(引导未定义)

我认为错误是导入，但样式工作，它可能是Vite?

Answer 1

您试图在DOM准备好之前初始化模态。我建议您在父组件的挂载处初始化组件。像这样:

Parent Component
<template>
...
<RegIdentErrorModalVue v-if="isMountedComponent" id="#ErrModal" :show="this.error" :occurred="'Identification'" :error_message="this.error_text" />
...
</template>
<script>
export default {
data() {
return {
isMountedComponent: false,
}
},
mounted() {
this.isMountedComponent = true;
},
}
</script>