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...
