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

Question

当前代码正在使用 vue.js 对数据进行排序和过滤。它工作正常，但数据是虚拟的，它是硬编码的。我需要使用 vue js 和 laravel 从 table 动态获取数据。如何获取 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 将查询您的数据库 table 和 return 它作为 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 的 ready 函数自动加载数据：

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

完成！您现在已将数据库数据分配给 Vue 的数据属性 gridData。

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

Sorting and Filtering ajax data using Laravel and VueJs

laravel

vue.js