LaravelとVueJsを使用したajaxデータのソートとフィルタリング

Question

現在のコードでは、vue.jsを使用してデータをソートしてフィルタリングしています。それは正常に動作しているが、データはダミーです、それはハードコードされています。 vue jsとlaravelを使ってテーブルからデータを動的に取得する必要があります。 gridDataで動的データを取得するにはどうすればよいですか？

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

あなたはいくつかのことを行う必要があります。

Laravelではまず、元のために、あなたのroutes.phpファイルに新しいルートを作成します。：

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

は、その後、あなたのコントローラ（somecontroller.php）で、あなたのデータベーステーブルを照会します方法indexを持つことになりますし、それをJSONデータとして返します。

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

Vueでは、このルートを呼び出してデータを取得できます。 AJAXを使用する。あなたは好きなAJAXライブラリ、たとえjQueryを使用することもできます。私は現在、Superagent.jsを使用しています。 Vueはどんなものでもうまく動作します。 だから、あなたのVueのコードでは、あなたのデータを取得するための新しい方法を作成：

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

次に、あなたはちょうどあなたが好きなボタンまたはとにかくを使用して、この新しいメソッドを呼び出すことができます。例えば、ボタンのクリックイベントを使用して：

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

それとも、ただのVueのレディ機能を使用して自動的にロードされたデータさえを持つことができます。

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

が完了し！これで、VueのデータプロパティgridDataにデータベースデータが割り当てられました。