在<b-collapse>中使用<b-dropdown>会导致DOM错误vue-bootstrap和nuxt js

Question

这是我的导航菜单代码：

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

但是我在nuxt中收到了很多DOM错误。我正在使用bootstrap-vue。我想在导航栏中使用“ b-dropdown”，但这会导致DOM错误。我如何摆脱这些错误？

为什么我在错误的地方使用“ b-dropdown”？好吧，请参见以下问题：bootstrap-vue multi level drop down

如果我删除（b-dropdown id =“ dropdown-1” ...）标签，错误将消失！

Answer 1

首先，这不是错误，而是警告。这与该组件与SSR不兼容有关，因此服务器端内容与客户端不匹配。

您应该尝试将代码包装在<no-ssr/>标签之间，这样可以使其正常工作。

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

有关更多信息，请检查此github issue。

Answer 2

这是Bootstrap-Vue（版本2.14.0到当前版本2.16.0）中的当前错误。 但是，基于此comment，有一种解决方法，其中涉及使用广告位代替text道具。

所以代替这个

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

你要写这个

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

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