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来细分布局。

以下是问题：

我该如何解决组件内部顶层div的问题？所以我的清单项目不会破
在我的情况下使用组件是正确的决定吗？
:active道具应该在组件中还是在主模板中？

Answer 1

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

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

demo

在组件-Vue2

1 个答案: