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