Я хочу визуализировать модал 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 (модальный), так как я уже использую плагин 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"
]
}