List rendering

Thev-fordirective requires a special type of expression in the form ofitem in items, whereitemsis the source array, anditemis an alias for the current array element being looped over.

Let's work on theamenitiesarray first. Each member of this array is an object with atitleandiconproperty, that is:

{ title: 'something', icon: 'something' }

We'll add thev-fordirective into the template and the expression we assign to it will beamenity in amenities. The alias part of the expression, that is amenity, will refer, throughout the loop sequence, to each object in the array, starting with the first.

index.html:

<p class="container">
  <p class="heading">...</p>
  <hr>
  <p class="about">...</p>
  <p class="lists">
    <p v-for="amenity in amenities">{{ amenity.title }}</p>
  </p>
</p>

It will render as:

<p class="container">
  <p class="heading">...</p>
  <hr>
  <p class="about">...</p>
  <p class="lists">
    <p>Wireless Internet</p>
    <p>Pets Allowed</p>
    <p>TV</p>
    <p>Kitchen</p>
    <p>Breakfast</p>
    <p>Laptop friendly workspace</p>
  </p>
</p>