title: Vuejs ajax GET request not returning data in Laravel 5.1 Blade template
body: <p>am trying to retrieve data from a database using  <a href="https://vuejs.org" rel="nofollow">vuejs</a> ajax call with a plugin called <a href="https://github.com/vuejs/vue-resource" rel="nofollow">vue-resource</a>. Unfortunately, the json data object contains the html page and not the actual data from the database. Can someone please tell me what am doing wrong?
  This is my code:</p>
  
  <p>routes.php</p>
  
  <pre><code>    &lt;?php
  Route::get('find', 'FruitsCtrl@index');
  </code></pre>
  
  <p>fruitsctrl.php (controller)</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Controllers;
  
  use Illuminate\Http\Request;
  use App\Fruit;
  use App\Http\Requests;
  use App\Http\Controllers\Controller;
  
  class FruitsCtrl extends Controller
  {
      public function index(Request $req){
          $fruits = Fruit::all();
          return view('fruitsHome', $fruits);
      }
  }
  </code></pre>
  
  <p>fruit.php (model)</p>
  
  <pre><code>&lt;?php
  
  namespace App;
  
  use Illuminate\Database\Eloquent\Model;
  
  class Fruit extends Model
  {
      protected $fillable = [
              'id', 'name', 'type'
      ];
  }
  </code></pre>
  
  <p>fruitshome.blade.php (view)</p>
  
  <pre><code>&lt;head&gt;
          &lt;meta id="token" content="{{ csrf_token() }}"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="row" id="vapp"&gt;
          &lt;ul&gt;
              &lt;li v-for="fruit in fruits"&gt;
                  @{{ fruit.name }}
                  @{{ fruit.type }}
  
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;body&gt;
  </code></pre>
  
  <p>app.js (javascript)</p>
  
  <pre><code>Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');
  var v = new Vue({
      el : "#vapp",
      ready :function () {
          this.fetchFruits();
      },
      data : {
          fruit : {id:'', name:'', type:''},
          fruits : []
      },
      methods : {
          fetchFruits : function(){
              this.$http.get('/find').then(function(res){
                  this.fruits = res;
              },function (data){
                  console.log(error ...);
              });
          }
      }
  });
  </code></pre>