use <b-dropdown> in <b-collapse> cause DOM errors vue-bootstrap and nuxt js

Question

this is my code for nav menu :

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

but i get so many DOM error in nuxt . i'm using bootstrap-vue . i want to use "b-dropdown" in nav bar but it cause DOM errors . how can i get rid of these errors ?

why i'm using "b-dropdown" in wrong place ? well , see this question : bootstrap-vue multi level drop down

if i remove (b-dropdown id="dropdown-1" ... ) tag , errors will go away !

sebasaenz · Accepted Answer · 2020-08-11 17:41:27Z

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.

Hiws · Accepted Answer · 2020-08-11 18:15:31Z

-1

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>

answered Aug 11, 2020 at 18:15

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

Collectives™ on Stack Overflow

use <b-dropdown> in <b-collapse> cause DOM errors vue-bootstrap and nuxt js

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related