使用 Vue 对表格进行排序

Question

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

我想知道这是否是使用 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

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

Answer 1

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

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

和

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]