Cacher is the code snippet organizer for pro developers

<?php

namespace App\Http\Controllers\Kiosk;

use App\Http\Controllers\Controller;
use App\FoodMap;

class FoodLogsController extends Controller
{
    /**
     * The FoodMap repository.
     *
     * @var FoodMap
     */
    protected $maps;

    /**
     * Create a new controller instance.
     *
     * @param  FoodMap  $maps
     * @return void
     */
    public function __construct(FoodMap $maps)
    {
        $this->maps = $maps;
    }

    public function show($calories)
    {
        return view('food-log.partials.table', ['map' => $this->maps->get($calories)])->render();
    }
}

<template>
  <div>
    <div v-if="html">
      <slot name="before"></slot>
      <div v-html="html"></div>
      <slot name="after"></slot>
    </div>

    <slot v-else></slot>
  </div>
</template>


<script>
    export default {
      props: ['url'],
      data: function() {
        return {
          html: ''
        };
      },
      watch: {
        url() {
          this.html = '';
          
          let self = this;
          axios.get(this.url)
            .then(function (response) {
                self.html = response.data;
            });
        }
      }
    }
</script>

<div class="panel panel-default">
  <div class="panel-heading">View Food Logs</div>

  <div class="panel-body">
    <select class="form-control" v-model="calories">
      <option v-for="(map, cal) in maps" :value="cal">@{{ cal }}</option>
    </select>
  </div>
</div>

<remote-component :url="'/spark/kiosk/food-logs/' + calories">
  <div slot="before">
    <h2>{{ calories }} Calories</h2>
  </div>
  
  <i class="fas fa-cog fa-spin"></i>
</remote-component>