title: Laravel 5.3 with Vuejs ajax call
body: <p>Trying to get some data from database using Vuejs. There are some dummy data in my users table. I want to show them in my view. Problem is though the page loads, It cannot fetch the data from the users table. It does not give any console error. I have checked database connection, restarted server and also checked api data with postman. It's working fine. </p>
  
  <p>Views: </p>
  
  <p>layout.blade.php</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen" title="no title"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div class="container"&gt;
        @yield('content')
      &lt;/div&gt;
  
      &lt;!-- scripts --&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.4.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.2/vue-resource.min.js" charset="utf-8"&gt;&lt;/script&gt;
      @yield('scripts')
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>fetchUser.blade.php</p>
  
  <pre><code>@extends('layout')
  @section('content')
  
  &lt;div id="UserController"&gt;
  
    &lt;table class="table table-hover table-striped"&gt;
      &lt;thead&gt;
        &lt;th&gt;Id&lt;/th&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Email&lt;/th&gt;
        &lt;th&gt;Address&lt;/th&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr v-for="user in users"&gt;
            &lt;td&gt;@{{ user.id }}&lt;/td&gt;
            &lt;td&gt;@{{ user.name }}&lt;/td&gt;
            &lt;td&gt;@{{ user.email }}&lt;/td&gt;
            &lt;td&gt;@{{ user.address }}&lt;/td&gt;
            &lt;td&gt;@{{ user.created_at }}&lt;/td&gt;
            &lt;td&gt;@{{ user.updated_at }}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;
  
  @endsection
  @section('scripts')
  &lt;script src="{{ asset('js/script.js') }}" charset="utf-8"&gt;&lt;/script&gt;
  @endsection
  </code></pre>
  
  <p>script.js</p>
  
  <pre><code>var vm = new Vue({
      el: '#UserController',
  
      methods: {
        fetchUser: function(){
            this.$http.get('api/users', function(data) {
                this.$set('users', data )
            })
        }
      },
  
        ready: function(){
  
      }
  });
  </code></pre>
  
  <p>web.php</p>
  
  <pre><code>Route::get('/', function () {
      return view('fetchUser');
  });
  </code></pre>
  
  <p>api.php</p>
  
  <pre><code>&lt;?php
  
  use Illuminate\Http\Request;
  use App\User;
  Route::get('/users', function(){
      return User::all();
  });
  </code></pre>