List rendering

Pay attention to the CategoryMenu component and the way it renders the child menu items off the categories array prop, as shown in the following example:

<li v-for="c in categories" :key="c.name">
  <CategoryMenuItem 
    :categoryName="c.name"
    :checked="c.name === selectedCategoryName"
    @selected="onCategorySelected"
  >
  </CategoryMenuItem >
</li>

In Vue, you can use the v-for directive to generate templates off lists. Essentially, v-for repeats the element the template is applied to, and its sub-tree, for every item in the bound list.

The basic usage is <variableName> in <arrayIdentifier>. This makes variableName available to the context of the template associated with the v-for directive. This is the reason you can use c.name inside.

Another thing to notice is the use of the key attribute. This is a specialized prop that should represent the identity, which means that elements with the same key are considered interchangeable, which...