Hands-On Full-Stack Web Development with ASP.NET Core

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