title: Data fetching from database using laravel and vuejs
body: <p>I am trying to fetching data from database using Laravel and Vue.js. 
  Result I am getting is none. But firebug console shows the response. Please find the attached image. Please check my code and correct me. <a href="https://i.stack.imgur.com/lwbyo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lwbyo.jpg" alt="Click Here"></a></p>
  
  <p><strong>data.blade.php</strong></p>
  
  <pre><code>@extends('layouts.app')
  
  @section('title', 'Customers List')
  
  @section('styles')
  @endsection
  
  @section('content')
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-10 col-md-offset-1"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;Customers List&lt;/div&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;table class="table table-hover table-bordered" id="app"&gt;
                              &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;#&lt;/th&gt;
                                  &lt;th&gt;Name&lt;/th&gt;
                                  &lt;th&gt;Reference ID&lt;/th&gt;
                                  &lt;th&gt;Action&lt;/th&gt;
                              &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                              &lt;?php
                              $i=1;
                              ?&gt;
                              &lt;tr v-for="message in messages"&gt;
                                  &lt;td&gt; {{ $i }} &lt;/td&gt;
                                  &lt;td&gt; @{{ message.name }} &lt;/td&gt;
                                  &lt;td&gt; @{{ message.reference_id }} &lt;/td&gt;
                                  &lt;td&gt;&lt;a href="/customers/list/process/" class="btn btn-primary btn-xs" role="button"&gt;Click Here&lt;/a&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;?php $i++; ?&gt;
                              &lt;/tbody&gt;
                          &lt;/table&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  @endsection
  
  @section('scripts')
      &lt;script src="/js/vue.js"&gt;&lt;/script&gt;
      &lt;script src="/js/vue-resource.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/customers.js"&gt;&lt;/script&gt;
  @endsection
  </code></pre>
  
  <p><strong>customers.js</strong></p>
  
  <pre><code>new Vue({
      el: '#app',
  
      ready: function() {
        this.fetchMessages();
      },
  
      methods: {
          fetchMessages: function() {
              this.$http.get('/customers/list/data', function(messages) {
                  alert(messages);
                  this.$set('messages', messages);
              });
          }
      }
  });
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>public function showCustomersData()
      {
          $listCustomers             = Customer::select('id', 'name', 'reference_id')
              -&gt;orderBy('id', 'desc')
              -&gt;get();
          return response()-&gt;json(['messages' =&gt; $listCustomers]);
      }
  </code></pre>
  
  <p><strong>Route</strong></p>
  
  <pre><code>Route::get('/customers/list/data', [
          'as' =&gt; 'customerListData', 'uses' =&gt; 'CustomerController@showCustomersData'
      ]);
  </code></pre>