Sorting and Filtering ajax data using Laravel and VueJs

Question

Current code is sorting and filtering data using vue.js. It is working fine but data is dummy, it is hardcoded. I need to get data dynamically from table using vue js and laravel. How can I get dynamic data in 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

crabbly · Accepted Answer · 2016-03-30 15:50:25Z

You will need to do a few things.

First, in Laravel, create a new route in your routes.php file, for ex.:

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

Then in your controller (somecontroller.php), you will have a method index which will query your database table and return it as JSON data.

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

Now, in Vue, your can call this route and grab the data. Using AJAX. You can use any AJAX library that you like, even jQuery. I currently use Superagent.js. Vue will work just fine with any. So, in your Vue code, create a new method to get your data.:

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

Then you can just call this new method using a button or anyway you like. For example, using a button click event:

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

Or you can even just have the data loaded automatically using Vue's ready function:

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

Done! You now have your database data assigned to Vue's data property gridData.

Collectives™ on Stack Overflow

Sorting and Filtering ajax data using Laravel and VueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related