无法读取 BoostrapVue 模态中未定义的属性“显示”答案

【问题标题】：Cannot read property 'show' of undefined in BoostrapVue Modal无法读取 BoostrapVue 模态中未定义的属性“显示”
【发布时间】：2020-04-16 22:46:24
【问题描述】：

    <b-button
      id="show-btn"
      @click="$bvModal.show('bv-modal-example')"
    >
      Open Modal
    </b-button>
    <b-modal id="bv-modal-example">Hello From My Modal!</b-modal>

Vue 版本：2.6.10

在 App.js 中安装并设置 Bootstrap

import BootstrapVue from 'bootstrap-vue';
Vue.use(BootstrapVue);

我在尝试打开模式时收到错误TypeError: Cannot read property 'show' of undefined。

我还应该为 BoostrapVue Modal 安装或设置什么以用作实例方法？

谢谢大家！

【问题讨论】：

你能从控制台粘贴整个错误吗？所以很容易发现错误。除此之外，您是否同时安装了 bootstrap 和 bootstrap-vue ？

标签： javascript vue.js bootstrap-vue

【解决方案1】：

我有一些方法可以让你尝试得到你想要的最终工作。

确定是否导入 Bootstrap 和 BootstrapVue CSS 文件：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

如果您使用的是模块捆绑器，您需要尝试只导入特定的组件组（插件），像这样。

import { ModalPlugin } from 'bootstrap-vue'
Vue.use(ModalPlugin)

如果这些都不起作用，请检查您的 node_module 中是否安装了 bootstrap 和 boostrapVue。为确保安全，请删除node_modules文件夹并在项目根目录的终端运行npm install或npm install bootstrap bootstrap-vue --save。

希望对您有所帮助。

【讨论】：