laravel 使用 Vue 对表格进行排序

Sorting a Table with Vue

提问by FerchoCarcho

If I ever want to sort a table with Vue.js, should I always get the data to be sorted received in an ajax request ? for the v-repeat to work? or which would be the way to make it with data coming from a controller?

如果我想用 Vue.js 对表格进行排序，我是否应该总是在 ajax 请求中接收要排序的数据？为 v-repeat 工作？或者用来自控制器的数据制作它的方法是什么？

I wanna know if this is the only way to proceed when using Vue.js Im trying to use an already fetched table in the traditional way and then sort its header fields eg. (title, created_at)

我想知道这是否是使用 Vue.js 时进行的唯一方法我尝试以传统方式使用已经获取的表，然后对其标题字段进行排序，例如。（标题，created_at）

 @foreach($sliders as $slider)
              <tbody>
                <tr>
                  <td>{{$slider->nombre}}</td>
                  <td>{{$slider->mensaje}}</td>
                  <td>{!!Html::image($slider->thumb_path)!!}</td>
                  <td>{{$slider->publicado}}</td>
                  <td>{{$slider->created_at}}</td>
                   <td>{!!link_to('admin/slider/'.$slider->id.'/edit', 'editar','class="btn btn-primary"')!!}
                      {!!link_to('admin/slider/'.$slider->id, 'borrar','class="btn btn-danger"')!!}
                  </td>
 @endforeach

I want my table to be like http://javascriptbook.com/code/c12/sort-table.htmlbut with Vue.Js and with Data received from a controller

我希望我的表像 http://javascriptbook.com/code/c12/sort-table.html但使用 Vue.Js 和从控制器接收的数据

采纳答案by Pantelis Peslis

You could use the orderByVue filter, for example:

您可以使用orderByVue 过滤器，例如：

<table>
  <thead>
    <tr>
      <th v-repeat="column: columns">
        <a href="#" v-on="click: sortBy(column)">{{ column }}</a>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr v-repeat="users | orderBy sortKey reverse">
      <td>{{ name }}</td>
      <td>{{ age }}</td>
    </tr>
  </tbody>
</table>

and

和

data: {
  sortKey: 'name',

  reverse: false,

  columns: ['name', 'age'],

  users: [
    { name: 'John', age: 50 },
    { name: 'Jane', age: 22 }
    // ...
  ]
},

methods: {
  sortBy: function(sortKey) {
    this.reverse = (this.sortKey == sortKey) ? ! this.reverse : false;

    this.sortKey = sortKey;
  }
}

[demo]

[演示]