Full-Stack Vue.js 2 and Laravel 5

List rendering

The v-for directive requires a special type of expression in the form of item in items, where items is the source array, and item is an alias for the current array element being looped over.

Let's work on the amenities array first. Each member of this array is an object with a title and icon property, that is:

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

We'll add the v-for directive into the template and the expression we assign to it will be amenity 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:

<div class="container">
  <div class="heading">...</div>
  <hr>
  <div class="about">...</div>
  <div class="lists ...