Daten holen aus der Datenbank mit Laravel und Vuejs

Question

Ich versuche, Daten aus der Datenbank mit Laravel und Vue.js zu holen. Ergebnis Ich bekomme keine. Aber Firebug Konsole zeigt die Antwort. Bitte finden Sie das angehängte Bild. Bitte überprüfe meinen Code und korrigiere mich.

data.blade.php

@extends('layouts.app') 

@section('title', 'Customers List') 

@section('styles') 
@endsection 

@section('content') 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-10 col-md-offset-1"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Customers List</div> 
        <div class="panel-body"> 
         <table class="table table-hover table-bordered" id="app"> 
          <thead> 
          <tr> 
           <th>#</th> 
           <th>Name</th> 
           <th>Reference ID</th> 
           <th>Action</th> 
          </tr> 
          </thead> 
          <tbody> 
          <?php 
          $i=1; 
          ?> 
          <tr v-for="message in messages"> 
           <td> {{ $i }} </td> 
           <td> @{{ message.name }} </td> 
           <td> @{{ message.reference_id }} </td> 
           <td><a href="/customers/list/process/" class="btn btn-primary btn-xs" role="button">Click Here</a></td> 
          </tr> 
          <?php $i++; ?> 
          </tbody> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
@endsection 

@section('scripts') 
    <script src="/js/vue.js"></script> 
    <script src="/js/vue-resource.min.js"></script> 
    <script src="/js/customers.js"></script> 
@endsection 

customers.js

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); 
      }); 
     } 
    } 
}); 

-Controller

public function showCustomersData() 
    { 
     $listCustomers    = Customer::select('id', 'name', 'reference_id') 
      ->orderBy('id', 'desc') 
      ->get(); 
     return response()->json(['messages' => $listCustomers]); 
    } 

Strecke

Route::get('/customers/list/data', [ 
     'as' => 'customerListData', 'uses' => 'CustomerController@showCustomersData' 
    ]); 

Answer 1

Ich habe den Controller Teil bearbeitet. Jetzt habe ich ein Ergebnis. Ersetzen Sie return response()->json(['messages' => $listCustomers]) durch return $listCustomers.

public function showCustomersData() 
    { 
     $listCustomers    = Customer::select('id', 'name', 'reference_id') 
      ->orderBy('id', 'desc') 
      ->get(); 
     return $listCustomers; 
    } 

Answer 2

Sie müssen möglicherweise nach der Warnmeldung in der Konsole die Nachrichten Variable im Vue Datenobjekt vorab initialisieren. Ich denke, es hängt von der Version von VueJs ab, die du verwendest. Versuchen Sie:

new Vue({ 
    el: '#app', 

    data: { 
     messages: [] 
    }, 

    ready: function() { 
     this.fetchMessages(); 
    }, 

    methods: { 
     fetchMessages: function() { 
      this.$http.get('/customers/list/data', function(messages) { 
       alert(messages); 
       this.$set('messages', messages); 
      }); 
     } 
    } 
}); 

Answer 3

Hier ist ein Beispiel mit simulierten AJAX-Anfrage, um Rasterdaten zu aktualisieren. Hofft, Ihnen zu helfen.

var data = [{ 
 
    title: 'Test', 
 
    description: 'This is a test.' 
 
}, { 
 
    title: '404Error', 
 
    description: '404 Page not found.' 
 
}]; 
 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    messages: [] 
 
    }, 
 
    ready: function() { 
 
    this.fetchMessages(); 
 
    }, 
 
    methods: { 
 
    fetchMessages: function() { 
 
    var self = this; 
 
    // simulate the ajax request 
 
    setTimeout(function(){ 
 
     self.messages = data; 
 
    }, 1000); 
 
    } 
 
    } 
 
});

table { 
 
    border: 1px solid #ccc; 
 
    table-layout: fixed; 
 
    border-collapse: separate; 
 
} 
 
table th, table td { 
 
    border: 1px solid #ccc; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script> 
 
<div id="app"> 
 
<table> 
 
    <tr> 
 
    <th>Index</th> 
 
    <th>Title</th> 
 
    <th>Description</th> 
 
    <th>Action</th> 
 
    </tr> 
 
    <tr v-for="message in messages"> 
 
    <td>{{$index+1}}</td> 
 
    <td>{{message.title}}</td> 
 
    <td>{{message.description}}</td> 
 
    <td><button>Click me</button></td> 
 
    </tr> 
 
</table> 
 
</app>

P. S. Die erste Warnung informiert Sie Ihren Code ändern zu können, zieht es

// GET request 
this.$http({url: '/someUrl', method: 'GET'}).then(function (response) { 
    // success callback 
}, function (response) { 
    // error callback 
}); 

Die zweite Warnung Sie die Variable messages in data zum pre-init erzählt.
Die letzte, sorry, ich weiß es nicht, habe es vorher nicht gesehen.