使用Laravel和VueJs对ajax数据进行排序和过滤

当前代码正在使用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

@extends（'layouts.app'））
@章节（“标题”、“客户名单”）
@节（“样式”）
@端部
@节（“内容”）
客户名单
@{{键|大写}}
@{{entry[key]}
搜寻
@端部
@节（“脚本”）
@端部

您需要做一些事情

首先，在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的数据属性

gridData

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