Бутстрап-вюне появляются - PullRequest
Новая
       4

Бутстрап-вюне появляются

0 голосов
/ 13 октября 2019

Мне нужно создать модал, который всплывает при нажатии кнопки;я попробовал с bootstrap-vue, следуя документации, но это не сработало.

Я положил в свой проект vue, но он не работает. Кнопка есть, но когда я нажимаю, модал не появляется. Когда я иду к консоли, он говорит, что директива не распознана. Я поставлю код и ошибку ниже 

<template>
...
 <c-card>
 <div>
      <b-button v-b-modal.exclude class="center" size="lg" variant="danger">Excluir conta</b-button>
       <b-modal id="exclude" title="bootstrapVue">
        <p class="my-4">Are you sure that you want to exclude your account?</p>
      </b-modal>
  </div>


    </c-card>

  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import cCard from '@/components/Card'
import pStatusAchievements from './_partials/StatusAchievements'
import pStatusApps from './_partials/StatusApps'
import pStatusNetwork from './_partials/StatusNetwork'
import pStatus from './_partials/Status'
import pStatusPublication from './_partials/StatusPublication'
import pMyAccount from './MyAccount'
import pPowerUp from './_partials/PowerUp'
import {BModal, VBModal} from 'bootstrap-vue'
const cContentHeader = () => import('@/components/ContentMiddleHeader')

export default {
  name: 'Perfil',

  components: {
    cContentHeader,
    cCard,
    pStatusPublication,
    pStatusNetwork,
    pStatusApps,
    pMyAccount,
    pStatusAchievements,
    pStatus,
    pPowerUp,
    BModal,
  },

  data () {
    return {
      pubStatus: 1200,
      networkApps: [
        { name: 'network', title: 'rede' },
        { name: 'appsUsage', title: 'uso dos apps' }
      ]

    }
  },

  directives: {
    'b-modal': VBModal
  },

То есть vue-warn 

[Vue warn]: Unknown custom element: <b-modal> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Perfil> at src/views/perfil/Perfil.vue
       <MFeed> at src/views/mobile/mFeed.vue
         <SlideXLeftTransition>
           <NavbarContent> at src/views/mobile/mContent.vue
             <NavbarContent> at src/layouts/main/MainLayout.vue
               <FadeTransition>
                 <App> at src/App.vue
                   <Root
...