在<b-塌缩>中使用<b-下拉>将导致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错误。我用的是引导-vue。我想在导航栏中使用“b-下拉”，但是它会导致DOM错误。我怎样才能摆脱这些错误呢？

​

​

为什么我在错误的地方使用“b-下拉”？好吧，请看这个问题：引导-vue多层下拉

如果删除(b-下拉id=“下拉-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问题。

Answer 2

这是Bootstrap(版本2.14.0到当前版本2.16.0)中的一个当前错误。然而，基于这个评论，有一个解决办法，它包括使用一个插槽而不是text道具。

所以，而不是这个

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

你会写这个

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

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