Full-Stack Vue.js 2 and Laravel 5

Receiving in the client
With the initial state now ready, let's add it to our HomePage component. Before we
can use it though there's an additional aspect we need to consider: the listing
summaries are grouped by country. Look again at Figure 7.7 to see how these
groups are displayed.
After we've parsed our injected data, let's modify the object so the listings are
grouped by country. We can easily create a function to do this, as every listing
object has an address property in which the country is always explicitly named,
for example, No. 51, Hanzhong Street, Wanhua District, Taipei City, Taiwan 108.
To save you having to write this function, I have supplied one in the helpers
module called groupByCountry which can be imported at the top of the component
configuration.
resources/assets/components/HomePage.vue: ... import { groupByCountry }
from '../js/helpers'; let serverData = JSON.parse(window.vuebnb_server_data);
let listing_groups = groupByCountry(serverData.listings); export default { data()
{ return { listing_groups } } }
We'll now see through Vue Devtools that HomePage has successfully loaded the
listing summaries, grouped by country and ready for display: