[Vuejs]-Use <b-dropdown> in <b-collapse> cause DOM errors vue-bootstrap and nuxt js

by

0👍

✅

First of all, it’s not an error, it’s a warning. It has to do with that component not being compatible with SSR so the server side content doesn’t match the client side.

You should try wrapping the code between <no-ssr/> tags and that should make it work fine.

<no-ssr>
<b-navbar toggleable="lg" class="navbar navbar-expand-lg navbar-light">
  <b-navbar-toggle target="nav-collapse" class="mx-auto my-0"></b-navbar-toggle>
  <b-collapse id="nav-collapse" is-nav>
    <b-navbar-nav>
        <b-nav-item to="/">home</b-nav-item>
    </b-navbar-nav>
    <b-dropdown id="dropdown-1" text="categories">

        <b-dropdown id="dropdown-2" :text="category.title" v-for="category in settings.categories" 
        :key="category.id">
            <b-dropdown-item :to="`/category/`+child.id+`/`+child.slug"  v-for="child in 
            category.childs" :key="child.id">{{ child.title }}</b-dropdown-item>
        </b-dropdown>
    </b-dropdown>
  </b-collapse>
</b-navbar>
<no-ssr/>

For more information check this github issue.

0👍

It’s a current bug in Bootstrap-Vue (version 2.14.0 to the current version 2.16.0).
However based on this comment, there’s a workaround, which involves using a slot instead of the text prop.

So instead of this

<b-dropdown text="Category" ... >
  <!-- Content -->
</b-dropdown>

You would write this

<b-dropdown ... >
  <template v-slot:button-content>
    Category
  </template>

  <!-- Content -->
</b-dropdown>

Leave a comment