这是我的代码(错误):
<template lang="pug">
.component-root
b-btn(v-b-modal.myModal)
i.fa.fa-calendar
b-modal
span Hello this is my modal!
</template>
它输出一条错误消息:
[Vue warn]: Property or method "v" 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
当我使用
$refs
方法创建模态,它可以工作:
<template lang="pug">
b-button(@click="showModal")
i.fa.fa-calendar
b-modal(ref="myModalRef" hide-footer title="some title")
span Hello form my modal
</template>
<script>
...
methods: {
showModal() {
this.$refs.myModalRef.show();
},
}
...
</script>
这是我的主要应用程序。安装BootstrapVue的js
import 'bootstrap-vue/dist/bootstrap-vue.css';
import 'font-awesome/css/font-awesome.min.css';
import Vue from 'vue';
import Moment from 'vue-moment';
import BootstrapVue from 'bootstrap-vue';
import DatePicker from 'vue2-datepicker';
import './assets/bootstrap.cosmo.min.css';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
Vue.use(Moment);
Vue.use(DatePicker);
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
});
我只是按照手册的说明:
https://bootstrap-vue.js.org/docs/components/modal/
到目前为止,我有问题,直到我想显示一些模态。
我怎么了?