使用 Vue 对 Table 进行排序

Question

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

我想知道这是否是使用 Vue.js 时继续进行的唯一方法我正在尝试以传统方式使用已经获取的 table，然后对其 header 字段进行排序，例如。（标题，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

我希望我的 table 像 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]

使用 Vue 对 Table 进行排序

Sorting a Table with Vue

laravel

vue.js