sorting - 在vuejs中对两个方向进行排序

Question

我在 Electron + VueJS 2.X 中有一个基本应用程序（因为我是一个完整的初学者），我希望有一个用于 v-for 列表的排序功能。我已经让它半工作，我可以排序，但如果应用第二次点击，我想反向排序。我不确定解决这个问题的最佳方法，也许我目前的道路需要改进。请让我知道如何实现这一目标。

我正在使用“selectedCategory”来跟踪当前类别，如果它出现两次就会运行return this.items.reverse()，但我无法让它工作。

我已经清理了代码以提高可读性。

export default {
  name: 'home-page',
  data() {
    return {
      selectedCategory: null,
      items: [{
          id: 1,
          name: 'Person 1',
          leave: 123.45
        },
        {
          id: 2,
          name: 'John Smith',
          leave: 13.45
        },
        {
          id: 3,
          name: 'Bill Smith',
          leave: 23.45
        },
        {
          id: 4,
          name: 'John Doe',
          leave: 133.53
        }
      ]
    }
  },
  methods: {
    sortedByName: function() {
      function compare(a, b) {
        if (a.name < b.name) {
          return -1
        }
        if (a.name > b.name) {
          return 1
        }
        return 0
      }
      this.selectedCategory = 'name'
      return this.items.sort(compare)
    },
    sortedByNumber: function() {
      // Same as above but a.leave and b.leave
    },
    sortedById: function() {
      // Same as above but a.id and b.id
    }
  }
}

<template>
       <a v-on:click="sortedById()">ID</a>
       <a v-on:click="sortedByName()">User</a>
       <a v-on:click="sortedByNumber()">Leave Owing</a>
                  
       <div id="page_list">
          <div class="user_row" v-for="item in items">
             <div class="user_status">{{ item.id }}</div>
             <div class="username">{{ item.name }}</div>
             <div class="leave_owing">{{ item.leave }}</div>
           </div>
       </div>
</template>

谢谢

标签： sortingvue.jselectron

Answer 1

你可以使用计算

var app = new Vue({
  el: '#app',
  computed: {
    sortedData () {
      if(!this.sort.field){
        return this.items
      }

      return this.items.concat().sort((a,b)=>{
        if(this.sort.desc){
          return a[this.sort.field] > b[this.sort.field] ? -1:1        
        }else{
          return a[this.sort.field] > b[this.sort.field] ? 1:-1                  
        }
      })
    }
  },
  data () {
    return {
      sort: {
        field: '',
        desc: true        
      },
      items: [
        { id: 1, name: 'Person 1', leave: 123.45 },
        { id: 2, name: 'John Smith', leave: 13.45 },
        { id: 3, name: 'Bill Smith', leave: 23.45 },
        { id: 4, name: 'John Doe', leave: 133.53 }
      ]
    }
  },
  methods: {
    doSort (field) {
      if(field == this.sort.field){
        this.sort.desc = !this.sort.desc
      }else{
        this.sort.field = field;
        this.sort.desc = true;
      }
    }
  }
})

  .user_row{
    display:flex;
  }
  .user_row>div{
    flex:1;
    text-align: center;
  }

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
   <a v-on:click="doSort('id')" href="javascript:">ID<span v-if="sort.field=='id'">({{sort.desc?'desc':'asc'}})</span></a>
   <a v-on:click="doSort('name')" href="javascript:">User<span v-if="sort.field=='name'">({{sort.desc?'desc':'asc'}})</span></a>
   <a v-on:click="doSort('leave')" href="javascript:">Leave Owing<span v-if="sort.field=='leave'">({{sort.desc?'desc':'asc'}})</span></a>

   <div id="page_list">
      <div class="user_row" v-for="item in sortedData">
         <div class="user_status">{{ item.id }}</div>
         <div class="username">{{ item.name }}</div>
         <div class="leave_owing">{{ item.leave }}</div>
       </div>
   </div>
</div>