Сортировка обоих направлений в 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>

Спасибо

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>