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

【问题标题】：use <b-dropdown> in <b-collapse> cause DOM errors vue-bootstrap and nuxt js在 <b-collapse> 中使用 <b-dropdown> 导致 DOM 错误 vue-bootstrap 和 nuxt js
【发布时间】：2020-12-01 10:10:52
【问题描述】：

这是我的导航菜单代码：

<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" ... ) 标签，错误就会消失！

【问题讨论】：

标签： vue.js nuxt.js virtual-dom bootstrap-vue

【解决方案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。

【讨论】：

【解决方案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>

【讨论】：