Full-Stack Vue.js 2 and Laravel 5

Saved page
We will now add the saved page to Vuebnb. Let's begin by creating the
component file: $ touch resources/assets/components/SavedPage.vue
Next, we'll create a new route with this component at the path /saved.
resources/assets/js/router.js: ... import SavedPage from
'../components/SavedPage.vue'; let router = new VueRouter({ ... routes: [ ... {
path: '/saved', component: SavedPage, name: 'saved' } ] });
Let's also add some server-side routes to the Laravel project. As discussed
above, the saved page uses exactly the same data as the home page. This means
that we can just call the same controller methods used for the home page.
routes/web.php: Route::get('/saved', 'ListingController@get_home_web');
routes/api.php: Route::get('/saved', 'ListingController@get_home_api');
Now we will define the SavedPage component. Beginning with the script tag, we
will import the ListingSummary component we created back in Chapter 6, Composing
Widgets with Vue.js Components. We'll also create a computed property, listings,
that will return the listing summaries from the store, filtered by whether or not
they're saved.
resources/assets/components/SavedPage.vue: import
ListingSummary from './ListingSummary.vue'; export default { computed: {
listings() { return this.$store.state.listing_summaries.filter( item =>
this.$store.state.saved.indexOf(item.id) > -1 ); } }, components: {
ListingSummary } }
Next, we will add to the template tag of SavedPage. The main content includes a
check for the length of the array returned by the listings computed property. If it
is 0, no items have been saved yet. In this case, we display a message to inform
the user. If there are listings saved, however, we'll iterate through them and
display them with the ListingSummary component.