无法在 Vuejs 中使用 vue-bootstrap 的 $bvModal 动态渲染模态

Question

我想动态渲染 vue-bootstrap 的模态，而不是通过编写任何 html 代码。我参考了文档 - https://bootstrap-vue.js.org/docs/components/modal/#modal-message-boxes 并在我的 vue 项目中应用了相同的内容，但是当我尝试调用 bvModal.msgBoxOk('sad') -

时它给了我一个错误

vue.runtime.esm.js?ff9b:587 [Vue warn]: Property or method "$bvModal" is 
not defined on the instance but referenced during render. Make sure that 
this property is reactive, either in the data option, or for class-based 
components, by initializing the property. See: 
https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

我在 jsfiddle 中试过它，但它在我的项目中不起作用 - https://jsfiddle.net/yrb4tcfm/11/

这是我的 main.js

    import 'babel-polyfill'
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import BootstrapVue from 'bootstrap-vue'
    import store from './store/store'
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    import Modal from 'bootstrap-vue/es/components/modal'


    Vue.use(BootstrapVue)
    Vue.use(Modal)

    new Vue({
      el: '#app',
      store,
      router,
      render: h => h(App)
    })

之前，我尝试过不添加 Vue.use(Modal)，因为我已经在使用 BootstrapVue 插件，但它仍然无法正常工作。

App.vue

    <template>
      <b-btn @click="show()">Hello</b-btn>
    </template>

    <script>
    export default {
      methods: {
        show: function () {
          this.$bvModal.msgBoxOk('fdsdfds')
        }
      }
    }
    </script>

Package.json

    {
      "name": "xyz",
      "version": "1.0.0",
      "description": "xyz",
      "author": "xyz",
      "private": false,
      "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "dev:admin": "webpack-dev-server --inline --progress --config build/webpack.dev.admin.conf.js",
        "dev:user": "webpack-dev-server --inline --progress --config build/webpack.dev.user.conf.js",
        "local:admin": "webpack-dev-server --inline --progress --config build/webpack.local.admin.conf.js",
        "local:user": "webpack-dev-server --inline --progress --config build/webpack.local.user.conf.js",
        "dev:gen": "node generators/generate.js",
        "start": "npm run dev",
        "unit": "jest --config test/unit/jest.conf.js --coverage --silent",
        "e2e": "node test/e2e/runner.js",
        "local:e2e": "node test/e2e/runner-local-e2e.js --port",
        "cypress:open": "cypress open",
        "cypress:run": "cypress run",
        "test": "jest --clearCache && npm run unit && npm run e2e",
        "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
        "clear_jest": "jest --clearCache",
        "build": "node build/build.js"
      },
      "dependencies": {
        "bootstrap-vue": "2.0.0-rc.11",
        "lodash": "4.17.11",
        "moment": "2.22.2",
        "stylus": "0.54.5",
        "stylus-loader": "3.0.2",
        "vue": "2.5.16",
        "vue-router": "3.0.1",
        "vuex": "3.0.1",
        "whatwg-fetch": "2.0.4"
      },
      "devDependencies": {
        "@vue/test-utils": "1.0.0-beta.19",
        "autoprefixer": "7.2.6",
        "babel-core": "6.26.3",
        "babel-eslint": "8.2.3",
        "babel-helper-vue-jsx-merge-props": "2.0.3",
        "babel-jest": "21.2.0",
        "babel-loader": "7.1.4",
        "babel-plugin-dynamic-import-node": "1.2.0",
        "babel-plugin-syntax-jsx": "6.18.0",
        "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
        "babel-plugin-transform-runtime": "6.23.0",
        "babel-plugin-transform-vue-jsx": "3.7.0",
        "babel-polyfill": "6.26.0",
        "babel-preset-env": "1.7.0",
        "babel-preset-stage-2": "6.24.1",
        "babel-register": "6.26.0",
        "chalk": "2.4.1",
        "chromedriver": "2.40.0",
        "copy-webpack-plugin": "4.5.1",
        "cross-spawn": "5.1.0",
        "css-loader": "0.28.11",
        "cypress": "3.0.2",
        "eslint": "4.19.1",
        "eslint-config-standard": "10.2.1",
        "eslint-friendly-formatter": "3.0.0",
        "eslint-loader": "1.9.0",
        "eslint-plugin-cypress": "2.0.1",
        "eslint-plugin-import": "2.12.0",
        "eslint-plugin-node": "5.2.1",
        "eslint-plugin-promise": "3.8.0",
        "eslint-plugin-standard": "3.1.0",
        "eslint-plugin-vue": "4.5.0",
        "extract-text-webpack-plugin": "3.0.2",
        "fetch-mock": "6.5.0",
        "file-loader": "1.1.11",
        "friendly-errors-webpack-plugin": "1.7.0",
        "geckodriver": "1.12.2",
        "html-webpack-plugin": "2.30.1",
        "jest": "22.4.4",
        "jest-serializer-vue": "0.3.0",
        "nightwatch": "0.9.21",
        "node-notifier": "5.2.1",
        "node-sass": "4.9.3",
        "optimize-css-assets-webpack-plugin": "3.2.0",
        "ora": "0.2.3",
        "portfinder": "1.0.13",
        "postcss-import": "11.1.0",
        "postcss-loader": "2.1.5",
        "postcss-url": "7.3.2",
        "rimraf": "2.6.2",
        "sass-loader": "7.1.0",
        "selenium-server": "3.12.0",
        "semver": "5.5.0",
        "shelljs": "0.7.8",
        "uglifyjs-webpack-plugin": "1.2.5",
        "url-loader": "0.5.9",
        "vue-jest": "1.4.0",
        "vue-loader": "13.7.2",
        "vue-style-loader": "3.1.2",
        "vue-template-compiler": "2.5.16",
        "vue2-datepicker": "2.5.0",
        "webpack": "3.12.0",
        "webpack-bundle-analyzer": "2.13.1",
        "webpack-dev-server": "2.11.2",
        "webpack-merge": "4.1.3"
      },
      "engines": {
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }

Answer 1

你可以更新你的bootstrap-vue到最新版本2.0.0-rc.19它解决了我的问题。

发行说明

https://github.com/bootstrap-vue/bootstrap-vue/releases/tag/v2.0.0-rc.19

无法在 Vuejs 中使用 vue-bootstrap 的 $bvModal 动态渲染模态

Unable to use vue-bootstrap's $bvModal in Vuejs to render modal dynamically

bootstrap-modal

vue.js

bootstrap-4

bootstrap-vue