Full-Stack Vue.js 2 and Laravel 5

Let's declare ListingSummary within our HomePage template. We'll again use a v-for
directive to iterate group, an array, creating a new instance of ListingSummary for
each member. The data for each member will be bound to a single prop, listing.
resources/assets/components/HomePage.vue: Places in {{ country }}
import { groupByCountry } from '../js/helpers';
import ListingSummary from './ListingSummary.vue'; let serverData =
JSON.parse(window.vuebnb_server_data); let listing_groups =
groupByCountry(serverData.listings); export default { data() { return {
listing_groups } }, components: { ListingSummary } }
Let's create some simple content for the ListingSummary component, just to test our
approach.
resources/assets/components/ListingSummary.vue:
{{ listing.address }} export default {
props: [ 'listing' ], }
Refreshing our page, we'll now see this prototype of our listing summaries: