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