Showing the list of categories, and adding new ones

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 `triggerShowAddCategoryevent to the parent, like we did before with theAddCategorycomponent. So now inApp.vue, we need to handle that:

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

and in the App 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-gray-200 hover:bg-gray-400 uppercase font-black cursor-pointer"
      v-for="category in categories"
      :key="category"
    >
      {{category}}
    </li>

    <li
      class="p-4 inline bg-gray-200 hover:bg-gray-400 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-gray-200  .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