在组件内使用列表项 - Vue2

Question

使用 bootstrap-vue 及其列表项：

<b-nav pills>
  <b-nav-item v-for="item in items">{{ text }}</b-nav-item>
</b-nav>

我想实现以下目标：

当我点击某个项目时，它会获得一个活动状态（有内置指令:active，如果它返回true，那么它会获得一个活动类），但是如果我点击另一个项目，先前单击的项目也应保持活动状态，并且单击的新项目也应处于活动状态。所以我决定使用一个带有自己变量的组件来切换活动状态。但是我遇到了组件内部的问题，因为它必须有一个根div，所以我不得不这样使用它：

组件

<template>
  <div>
    <b-nav-item :active="selectedCategory">{{ category.price }} ₸</b-nav-item>
  </div>
</template>

<script>
export default {
  name: 'Category',

  data () {
    return {
      selectedCategory: false
    }
  }
}
</script>

添加组件后的主模板

<b-nav pills>
  <Category v-for="item in items"/>
</b-nav>

如您所见，我使用了顶级div，它打破了我的布局。

问题如下：

1. 如何解决组件内部顶级div 的问题？所以我的列表项不会中断
2. 在我的案例中使用组件是正确的决定吗？
3. :active 属性应该在组件中还是在主模板中？

Answer 1

对b-nav-item 应用一个类（例如，命名为“nav-item”），并将其display 设置为inline-block：

.nav-item {
  display: inline-block;
}

demo