Now that we can enter a category, when we go to the main screen, we should see it on the top of the screen, and we also want a + button to show us again the AddCategory component so we can add a new one.

Let’s do it.

From the App component, we pass the categories list to the NavBar component:

<NavBar :categories=categories />

and in NavBar.vue we show them in this way:

<template>
  <ul>
    <li
      v-for="category in categories"
      :key="category">
      {{category}}
    </li>
  </ul>
</template>

<script>
export default {
  props: ['categories'],
}
</script>

Next, we add the + button so we can add a new category.

<template>
  <ul>
    <li
      v-for="category in categories"
      :key="category">
      {{category}}
    </li>
    <li @click="triggerShowAddCategory">➕</li>
  </ul>
</template>

<script>
export default {
  props: ['categories'],
  methods: {
    triggerShowAddCategory() {
      this.$emit('triggerShowAddCategory')
    }
  }
}
</script>

We emit the `triggerShowAddCategory event to the parent, like we did before with the AddCategory component. So now in App.vue, we need to handle that:

<NavBar :categories=categories v-on:triggerShowAddCategory=triggerShowAddCategory />

and in the component methods we add:

triggerShowAddCategory() {
  this.shouldShowAddCategory = true
}

Cool! We can now add some Tailwind classes to make it all look good, and we’re done:

<template>
  <ul class="list-reset inline flex justify-center border-b-4 mb-0">
    <li
      class="p-4 inline bg-grey-lighter hover:bg-grey-light uppercase font-black cursor-pointer"
      v-for="category in categories"
      :key="category" >
      {{category}}
    </li>

    <li class="p-4 inline bg-grey-lighter hover:bg-grey-light uppercase font-black cursor-pointer" @click="triggerShowAddCategory">➕</li>
  </ul>
</template>

Note: I repeat some styles in the two li elements. If you use the Vue CLI locally, you can create a class to include those styles:

.top-menu-item {
  @apply .p-4 .inline .bg-grey-lighter  .uppercase .font-black;
}

Unfortunately, this is not possible at the moment using CodeSandbox, so for the sake of simplicity, we’ll stick with duplicates.

I tell you just to know that Tailwind can avoid being that verbose, and much more concise.

See the app in the current state on CodeSandbox.


Go to the next lesson