ListingSummary component

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