Сортировка таблицы с 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]