VueJS中使用Bootstrap调用模态框无反应该如何解决？

问题排查及解决方案 #

1. 依赖引入顺序校验 #

Bootstrap 4的模态框依赖 jQuery 和 Popper.js 两个前置库，必须确保引入顺序正确：

• 若使用npm安装依赖，在项目入口文件main.js中按如下顺序引入并挂载全局：

import $ from 'jquery'
import 'popper.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
// 挂载到全局作用域，组件内可直接调用$
window.$ = window.jQuery = $

• 若使用CDN引入，确保HTML中script标签顺序为：jQuery → Popper.js → Bootstrap.js，顺序错误会导致modal方法未定义的隐藏报错。

2. Bootstrap 5版本适配 #

如果你使用的是Bootstrap 5版本，该版本已移除默认jQuery依赖，原有jQuery调用方式失效，需改用Bootstrap原生JS API调用模态框，修改showModal方法即可：

methods: {
  showModal() {
    console.log("test")
    const modalElement = document.getElementById('exampleModal')
    const bootstrapModal = new bootstrap.Modal(modalElement)
    bootstrapModal.show()
  }
}

3. 更符合Vue规范的实现方案（无需jQuery） #

Vue是数据驱动DOM的框架，直接用jQuery操作DOM容易和Vue的响应式渲染逻辑冲突，推荐用响应式变量控制模态框的显示隐藏，实现代码如下：

<template>
  <div id="app_religion">
    <button type="button" class="btn btn-primary"  @click="showModal = true">
      Open
    </button>

    <div class="modal fade" :class="{show: showModal}" v-if="showModal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-backdrop fade show" v-if="showModal" @click="showModal = false"></div>
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" @click="showModal = false" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            test
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="showModal = false">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 控制模态框显示状态的响应式变量
      showModal: false
    }
  }
}
</script>

<style scoped>
/* 兼容模态框显示样式 */
.modal.show {
  display: block;
}
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: 0.5;
  z-index: 1040;
}
.modal {
  z-index: 1055;
}
</style>

内容的提问来源于stack exchange，提问作者Rein Mallari