Vuejs：如何在 BootstrapVue 中使用“v-b-modal 指令”？答案

【问题标题】：Vuejs: How to use `v-b-modal directive` in BootstrapVue?Vuejs：如何在 BootstrapVue 中使用“v-b-modal 指令”？
【发布时间】：2018-08-13 20:30:59
【问题描述】：

这是我的代码（错误）：

<template lang="pug">
  .component-root
    b-btn(v-b-modal.myModal)
      i.fa.fa-calendar
    b-modal#myModal
      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#Declaring-Reactive-Properties.

当我使用$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 的主要 App.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);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
});

我只是按照这里的手册操作：https://bootstrap-vue.js.org/docs/components/modal/ 到目前为止，在我想展示一些模态之前我遇到了问题。

我怎么了？

【问题讨论】：

你知道v是什么吗？该 pug 模板是否呈现任何带有 v 值的属性？
@Bhojendra：什么？怎么和那个重复？？？它在 asp.net 中，根本没有引用任何 BootstrapVue 模式。
@acdcjunior : 我只是按照 BootstrapVue 自己网站上的本手册bootstrap-vue.js.org/docs/components/modal

标签： vue.js bootstrap-vue

【解决方案1】：

问题是哈巴狗。在：

<template lang="pug">
  .component-root
    b-btn(v-b-modal.myModal)
      i.fa.fa-calendar
    b-modal#myModal
      span Hello this is my modal!
</template>

行：

b-btn(v-b-modal.myModal)

把事情搞砸了。 用途：

b-btn(v-b-modal.myModal="")

原因：

b-btn(v-b-modal.myModal) 创建 <b-btn v-b-modal.myModal="v-b-modal.myModal">，这使得 Vue 搜索该值。使用b-btn(v-b-modal.myModal="") 创建<b-btn v-b-modal.myModal=""> 可以解决问题。

【讨论】：