Bootstrap-Vue中在v-select后添加b-button出现报错如何解决

报错核心原因 #

最常见的报错触发点是 Vue 2.x 单文件组件的template要求仅能存在一个根节点，你原代码中template下仅<v-select>一个根元素，直接在其后新增<b-button>会导致出现两个平行根节点，不符合Vue 2的语法规范。
除此之外还有两类小概率触发原因：

• <b-button>组件未完成注册，无法被识别
• 引入的第三方v-select组件和Bootstrap-Vue存在命名/依赖冲突

修复方案 #

方案1：新增根容器包裹两个元素（最通用） #

用任意块级标签（比如普通div、Bootstrap-Vue的布局组件）包裹<v-select>和<b-button>，让template下仅存在一个根节点即可，示例代码如下：

<template>
  <div class="d-flex align-items-center gap-2">
    <v-select>
      <template slot="option" slot-scope="option">
        <div class="d-center">
          {{ option.name }}
        </div>
      </template>
    </v-select>
    <b-button variant="primary">操作按钮</b-button>
  </div>
</template>

上面代码里的d-flex align-items-center gap-2是Bootstrap内置工具类，可以直接实现两个元素横向居中对齐、带间距的效果，不需要额外写自定义样式。

方案2：组件注册校验 #

如果修改后仍然报<b-button>相关的未知组件错误，检查组件注册逻辑：

• 全量引入Bootstrap-Vue的场景下，确认main.js里的注册逻辑正确，没有遗漏Vue.use(BootstrapVue)的配置
• 按需引入的场景下，确认当前单文件组件已经引入并注册BButton：

  import { BButton } from 'bootstrap-vue'
  export default {
    components: { BButton },
    // 其他组件逻辑
  }
  

内容的提问来源于stack exchange，提问作者Giulia Santoro