代码之家  ›  专栏  ›  技术社区  ›  DennyHiu

Vuejs:如何在BootstrapVue中使用“v-b-modal指令”?

  •  1
  • DennyHiu  · 技术社区  · 7 年前

    这是我的代码(错误):

    <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的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/ 到目前为止,我有问题,直到我想显示一些模态。

    我怎么了?

    1 回复  |  直到 7 年前
        1
  •  1
  •   acdcjunior Mukul Kumar    7 年前

    问题是帕格。在中:

    <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=""> 这就解决了问题。

    更多信息: https://github.com/pugjs/pug/issues/370#issuecomment-2399051