CODEWITHSUNDEEP
vue.jsbootstrap-vue
DennyHiu
DennyHiu

Reputation: 6060

Vuejs: How to use `v-b-modal directive` in BootstrapVue?

Here's my code (ERROR):

<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>

it outputs an error message:

[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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

When I use $refs method to create modal, it works :

<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>

Here's my main App.js with BootstrapVue installed

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/>',
});

I just following the manual here: https://bootstrap-vue.js.org/docs/components/modal/ So far I have problem until I want to show some modal.

What's wrong with me?

Upvotes: 1

Views: 7601

Answers (1)

acdcjunior
acdcjunior

Reputation: 135762

The problem is pug. In:

<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>

The line:

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

Messes things up. Use:

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

Reason:

b-btn(v-b-modal.myModal) creates <b-btn v-b-modal.myModal="v-b-modal.myModal">, which makes Vue search for that falue. Using b-btn(v-b-modal.myModal="") creates <b-btn v-b-modal.myModal=""> which solves the problem.

More: https://github.com/pugjs/pug/issues/370#issuecomment-2399051

Upvotes: 1

Related Questions