在 <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”？好吧，看看这个问题：

如果我删除 (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>

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

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

vue.js

virtual-dom

nuxt.js

bootstrap-vue