Laravel ve VueJs kullanarak ajax verilerinin sıralanması ve filtrelenmesi

Question

Geçerli kod, vue.js. kullanarak verileri sıralıyor ve filtreliyor. İyi çalışıyor ama veri kukla, kodlanmış. Verileri vue js ve laravel kullanarak tablodan dinamik olarak almam gerekiyor. Dinamik verileri gridData'da nasıl edinebilirim?

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

Sen bir şeyler yapmak gerekir.

Birincisi, laravel içinde, controller içerisinde Sonra ex .:

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

(somecontroller.php) için routes.php dosyasında yeni bir rota, sizin veritabanı tablosu sorgulanır bir yöntem index olacak oluşturmak ve JSON verileri olarak döndürün.

public function index() { 
    //query your database any way you like. ex: 
    $fighters = Fighter::all(); 

    //assuming here that $fighters will be a collection or an array of fighters with their names and power 
    //when you just return this, Laravel will automatically send it out as JSON. 
    return $fighters; 
} 

Şimdi, Vue'da, bu rotayı arayabilir ve verileri alabilirsin. AJAX'ı kullanma. İstediğiniz herhangi bir AJAX kütüphanesini jQuery bile kullanabilirsiniz. Şu anda Superagent.js'yi kullanıyorum. Vue, herhangi biriyle iyi çalışır. Yani, Vue kodunda,

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

Sonra sadece sizin gibi yine bir düğme veya kullanarak, bu yeni yöntemi çağırabilirsiniz verilerinizi .: almak için yeni bir yöntem oluşturun. Örneğin, bir düğme tıklama olayı kullanarak:

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

Ya da sadece Vue 'hazır işlevini kullanarak otomatik olarak yüklenen veriler bile olabilir:

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

Bitti! Artık veritabanı verilerinizi Vue'nun gridData veri özelliğine atandınız.