Full-Stack Vue.js 2 and Laravel 5

Adding the thumbnail
Each mock listing has a thumbnail version of the first image, which can be used
for the listing summary. The thumbnail is much smaller than the image we use
for the header of the listing page and is ideal for the listing summaries on the
home page. The URL for the thumbnail is public/images/{x}/Image_1_thumb.jpg where
{x} is the ID of the listing.
Collection objects have a helper method, transform, that we can use to add the
thumbnail image URL to each listing. transform accepts a callback closure
function that is called once per item, allowing you to modify that item and return
it to the collection without fuss.
app/Http/Controllers/ListingController.php: public function get_home_web()
{ $collection = Listing::all([ 'id', 'address', 'title', 'price_per_night' ]); $collection-
>transform(function($listing) { $listing->thumb = asset( 'images/' . $listing->id .
'/Image_1_thumb.jpg' ); return $listing; }); $data = collect(['listings' =>
$collection->toArray()]); return view('app', ['data' => $data]); }
/*
[
"listings" => [
0 => [
"id" => 1,
"address" => "...",
"title" => "...",
"price_per_night" => "...",