Using list items inside component - Vue2

Question

Using bootstrap-vue and its list items:

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

I want to achieve the following thing:

When i click on a certain item, it would get an active state (there's built-in directive :active, if it's returns true, then it gets an active class), however if i click on another item, the previously clicked item should stay as active either, and new one clicked should be active either. So i've decided to use a component with it's own variable to toggle an active state. But i've faced the problem inside a component, because it must have a root div, so i'm forced to use it this way:

Component

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

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

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

Main template after adding the component

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

As you can see, i've used top level div that breaks out my layout.

Here's the questions:

How can i solve the problem with top level div inside my component? So my list item won't break
is it right decision to use a component in my case?
Should an :active prop be in component or in main template?

Have you tried span instead of div? Span is in-line and might not break — Varcorb
span works, but it's all about semantics, is it possible to avoid junking my html markup? — Alexander Kim

tony19 tony19 · Accepted Answer · 2018-09-24T19:15:36

Apply a class to b-nav-item (e.g., named "nav-item"), and style its display to be inline-block:

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

demo

Using list items inside component - Vue2

1 Answers