Now that the HomePage
component has data available, we can work on displaying it.
To begin with, clear out the existing content of the component and replace it with a div
. This div
will feature a v-for
directive to iterate through each of our listing groups. Since listing_groups
is an object with key/value pairs, we'll give our v-for
two aliases: group
and country
, which are the value and key of each object item respectively.
We will interpolate country
inside a heading. group
will be used in the next section.
resources/assets/components/HomePage.vue
:
<template>
<div>
<div v-for="(group, country) in listing_groups">
<h1>Places in {{ country }}</h1>
<div>
Each listing will go here
</div>
</div>
</div>
</template>
<script>...</script>
This is what the home page will now look like:

Figure 7.9. Iterating the listing summary groups in the HomePage component
Since...