Sortieren und Filtern von AJAX-Daten mit Laravel und VueJs

Question

Der aktuelle Code ist das Sortieren und Filtern von Daten mit vue.js. Es funktioniert gut, aber die Daten sind dumm, es ist hart codiert. Ich muss Daten dynamisch aus der Tabelle mit Vue Js und Laravel erhalten. Wie kann ich dynamische Daten in gridData bekommen?

JS

Vue.component('demo-grid', { 
    template: '#grid-template', 
    props: { 
     data: Array, 
     columns: Array, 
     filterKey: String 
    }, 
    data: function() { 
     var sortOrders = {} 
     this.columns.forEach(function (key) { 
      sortOrders[key] = 1 
     }) 
     return { 
      sortKey: '', 
      sortOrders: sortOrders 
     } 
    }, 
    methods: { 
     sortBy: function (key) { 
      this.sortKey = key 
      this.sortOrders[key] = this.sortOrders[key] * -1 
     } 
    } 
}) 

// bootstrap the demo 
var demo = new Vue({ 
    el: '#app', 
    data: { 
     searchQuery: '', 
     gridColumns: ['name', 'power'], 
     gridData: [ 
      { name: 'Chuck Norris', power: Infinity }, 
      { name: 'Bruce Lee', power: 9000 }, 
      { name: 'Jackie Chan', power: 7000 }, 
      { name: 'Jet Li', power: 8000 } 
     ] 
    } 
}) 

laravel.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"> 
         <script type="text/x-template" id="grid-template"> 
          <table class="table table-hover table-bordered"> 
           <thead> 
           <tr> 
            <th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}">@{{key | capitalize}}<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span> 
            </th> 
           </tr> 
           </thead> 
           <tbody> 
           <tr v-for="entry in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]"> 
            <td v-for="key in columns"> 
             @{{entry[key]}} 
            </td> 
           </tr> 
           </tbody> 
          </table> 
         </script> 
         <div id="app"> 
          <form id="search"> 
           Search <input name="query" v-model="searchQuery"> 
          </form> 
          <demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery"></demo-grid> 
         </div> 
        </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 

Answer 1

Sie müssen ein paar Dinge zu tun.

Zuerst in Laravel, erstellen Sie eine neue Route in Ihrer routes.php Datei, für ex .:

Route::get('/api/fighters', 'SomeController@index'); 

Dann in Ihrem Controller (somecontroller.php), werden Sie eine Methode haben index, die Ihre Datenbanktabelle abfragt und gebe es als JSON-Daten zurück.

Jetzt, in Vue, können Sie diese Route anrufen und die Daten abrufen. Verwenden von AJAX. Sie können jede beliebige AJAX-Bibliothek verwenden, sogar jQuery. Ich verwende derzeit Superagent.js. Vue wird gut mit jedem funktionieren. in Ihrem Vue Code So erstellen Sie eine neue Methode, um Ihre Daten zu erhalten .:

methods: { 
    getDataFromLaravel: function() { 
     //assign `this` to a new variable. we will use it to access vue's data properties and methods inside our ajax callback 
     var self = this; 
     //build your ajax call here. for example with superagent.js 
     request.get('/api/fighters') 
      .end(function(err,response) { 
       if (response.ok) { 
        self.gridData = response.body; 
       } 
       else { 
        alert('Oh no! We have a problem!'); 
       } 
      } 
    } 
} 

Dann können Sie einfach diese neue Methode aufrufen, eine Taste oder irgendwie, das Sie mögen. Um zum Beispiel eines Button-Klick-Ereignis mit:

<button type="button" @click="getDataFromLaravel">Get Data</button> 

Oder Sie können auch einfach nur die automatisch Vue-Ready-Funktion mit geladenen Daten:

// bootstrap the demo 
    var demo = new Vue({ 
     el: '#app', 
     data: { 
      .... } 
     ready: function() { 
      this.getDataFromLaravel(); 
     }, 
     methods: { 
       .... } 
    }); 

Fertig! Sie haben nun Ihre Datenbankdaten der Dateneigenschaft gridData von Vue zugewiesen.