在组件内使用列表项 - Vue2

Posted 2023-02-23

【中文标题】在组件内使用列表项 - Vue2

【英文标题】：Using list items inside component - Vue2

【发布时间】：2019-02-28 01:21:05

【问题描述】：

使用 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 属性应该在组件中还是在主模板中？

【问题讨论】：

你试过span而不是div吗？ Span 是内联的，可能不会中断

span 有效，但这都是关于语义的，是否可以避免垃圾我的 html 标记？

【参考方案1】：

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

.nav-item 
  display: inline-block;

demo