Question

如何在没有插件的情况下对Vue.js中的数据进行排序。我有像这样的json数据

var people = [
  {
    id: 1,
    firstName: "John",
    lastName: "Doe",
    email: "jdoe@example.com",
    dob: "12/12/12"
  },
  {
    id: 2,
    firstName: "Jane",
    lastName: "Smith",
    email: "jsmith@example.com",
    dob: "11/11/11"
  },
  {
    id: 3,
    firstName: "Brian",
    lastName: "Rogers",
    email: "brogers@example.com",
    dob: "10/10/10"
  }
];

如何将它们分类到表中的desc或asc并在表头中添加图标，当用户点击表头时，图标将动态变化。
例如，当数据从最高到最低时，图标将为fa-sort-amount-desc

我的表格代码如下：

            <div class="row">
                <div class="col-xs-12" v-if="!laravelData || laravelData.total === 0"><em>No data available.</em></div>
                <div class="col-xs-12">
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th> ID</th>
                                    <th> First Name</th>
                                    <th> Last Name</th>
                                    <th> Email </th>
                                    <th> DOB </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="data in laravelData.data" :key="data.title">
                                    <td> <a :href="data.account_link">@{{ data.id }}</a> </td>
                                    <td> @{{ data.firstName }}</td>
                                    <td> @{{ data.lastName }} </td>
                                    <td class="text-right"> @{{ data.email }} </td>
                                    <td class="text-right"> @{{ data.dob }} </td>
                                </tr>
                                <tr v-if="!laravelData || laravelData.total === 0">
                                    <td colspan="13"><em>No data available.</em></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

Answer 1

基本上，您需要实现自己的排序功能来对给定的对象数组进行排序，或者您可以使用https://lodash.com/docs/4.17.4#orderBy。通过使用lodash，我创建了以下简单演示。

C31

var people = [{
  id: 10,
  firstName: "John",
  lastName: "Doe",
  email: "jdoe@example.com",
  dob: "12/12/12"
}, {
  id: 2,
  firstName: "Jane",
  lastName: "Smith",
  email: "jsmith@example.com",
  dob: "11/11/11"
}, {
  id: 3,
  firstName: "Brian",
  lastName: "Rogers",
  email: "brogers@example.com",
  dob: "10/10/10"
}];

new Vue({
  el: '#app',
  data: {
    laravelData: {
      data: people,
    },
    sorting: {
        col: '',
        type: 'asc'
      }
  },
  methods: {
    sort: function(key,type) {
    //if( this.sorting.col){
      this.sorting.col = key;
      this.sorting.type = type 
   // }
     
      this.laravelData.data = _.orderBy(this.laravelData.data, key, this.sorting.type);

      //this.laravelData.data = sortByKey(this.laravelData.data,key)
     
    }
  }
})

你可以找到jsfiddle @ https://jsfiddle.net/sureshamk/zc9wr53g/2/

在没有插件的情况下对Vue.js中的数据进行排序

1 个答案: