Блог

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

Я попытался импортировать BootstrapVue в App.vue безрезультатно, поэтому просто попытался импортировать его в компонент, в котором я его использую, что также не работает. Я следую здесь за гидом — https://bootstrap-vue.org/docs/components/dropdown

Когда я просматриваю страницу с помощью Vue Devtools, компонент BDropdown отображается в том виде, в каком он отображается на странице, при этом все внутренние компоненты BDropdownItem также присутствуют. В HTML-файле разделители, из которых состоят все компоненты, выделяются при наведении курсора, но они невидимы на реальной странице.

Я проверил z-индексы на случай, если это что-то скрывает, но там ничего нет.

Кто — нибудь знает, в чем причина этого?

 <script>
import { BootstrapVue } from 'bootstrap-vue'

// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

export default {
  name: "MyComponent",
  components: {
    BootstrapVue
  }
}
</script>

<template>
  <div class="test">
    <div class="dropdown-container">
      <b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
        <b-dropdown-item>First Action</b-dropdown-item>
        <b-dropdown-item>Second Action</b-dropdown-item>
        <b-dropdown-item>Third Action</b-dropdown-item>
        <b-dropdown-divider></b-dropdown-divider>
        <b-dropdown-item active>Active action</b-dropdown-item>
        <b-dropdown-item disabled>Disabled action</b-dropdown-item>
      </b-dropdown>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .test {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 673px;
    height: 77px;
  }
</style>