如何使用 Vue JS 制作列表并添加排序功能？

Question

我正在用 Vue js 做一个排序功能

我想按ID顺序做一个默认的列表，然后点击asc/desc by name按钮就可以实现排序功能。

另外，当点击all按钮时，列表再次按ID顺序排序并添加名为is-active的类

我知道我默认添加了排序功能，但我不知道如何与ID号的顺序结合。

如果有人知道怎么做，请帮忙。

谢谢

new Vue({
  el: '#app',
  data: {
    allItem: true,
    order: null,
    list: [],
  },
  created: function () {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(function (response) {
      this.list = response.data
    }.bind(this)).catch(function (e) {
      console.error(e)
    })
  },
  methods: {
    all: function() {
      this.full = true                 //for button class 'is-active'... NOT WORKING ...
    },
  },
  computed: {
    sort: function() {
      console.log(this.order);
      return _.orderBy(this.list, 'name', this.order ? 'desc' : 'asc')   //loadash
    },
    sorted: function() {
      if (this.order || !this.order) { //sort by arc/desc
        this.ordered = true            //for button class 'is-active'... NOT WORKING ...
        this.allItem = false           //for button class 'is-active'... NOT WORKING ...
        console.log(this.order);
        return this.sort

      } else if (this.order = null){   //defalut order by ID number ... NOT WORKING ...
        this.ordered = false           //for button class 'is-active'... NOT WORKING ...
        console.log(this.full);
        return this.list
      }

    },
  }
})

span {font-weight: bold;}
.is-active {background: turquoise;}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in sorted" :key="item.id">
      <span>ID:</span> {{item.id}} ,  <span>Name:</span> {{item.name}} ,  <span>Company:</span> {{item.company.name}}
    </li>
  </ul>

  <button :class="{'is-active': allItem}"  @click="all">all</button>
  <button :class="{'is-active': ordered}"  @click="order=!order">asc/desc by name</button>
</div>

Answer 1

new Vue({
  el: '#app',
  template: `
    <div v-if="!loading">
      <ul>
        <li v-for="item in sorted" :key="item.id">
          <strong>ID:</strong> {{item.id}} ,  
          <strong>Name:</strong> {{item.name}} ,      
          <strong>Company:</strong> {{item.company.name}}
        </li>
      </ul>

      <button :class="{ 'is-active': sortId === 'id' }"  @click="sortById">all</button>
      <button :class="{ 'is-active': sortId === 'name' }"  @click="sortByName">asc/desc by name</button>
    </div>
  `,
  data() {
    return {
      list: [],
      loading: true,
      sortId: "id",
      directionAsc: true,
    };
  },
  computed: {
    sorted() {
      const DIRECTION = this.directionAsc ? "asc" : "desc";
      return _.orderBy(this.list, [this.sortId], [DIRECTION]);
    },
  },
  created: function() {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(function(response) {
        this.list = response.data;
        this.loading = false;
      }.bind(this)).catch(function(e) {
        console.error(e)
      })
  },
  methods: {
    sortById() {
      if (this.sortId === "id") {
        return;
      }
      this.sortId = "id";
      this.directionAsc = true;
    },

    sortByName() {
      if (this.sortId === "name") {
        this.directionAsc = !this.directionAsc;
      } else {
        this.sortId = "name";
      }
    },
  },
})

.is-active {
  background: turquoise;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<div id="app"></div>

Answer 2

您可以使用计算和切换更简单。代码：

new Vue({
  el: '#app',
  data: {
    sort: '',
    order: false,
    list: [],
  },
  created: function () {
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(function (response) {
      this.list = response.data
    }.bind(this)).catch(function (e) {
      console.error(e)
    })
  },
  methods: {
    setSort(sort) {
        if(this.sort === sort) {
            this.toggleOrder();
        } else {
            this.sort = sort;
        }
    }
    toggleOrder() {
        this.order = !this.order;
    }
  },
  computed: {
    sortedList: function() {
        switch(this.sort) {
            case 'name':
                return _.orderBy(this.list, 'name', this.order ? 'desc' : 'asc');
            case 'id':
                return _.orderBy(this.list, 'id', this.order ? 'desc' : 'asc');
            default:
                return this.list;
        }
    },
  }
})

和模板：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in sorted" :key="item.id">
      <span>ID:</span> {{item.id}} ,  <span>Name:</span> {{item.name}} ,  <span>Company:</span> {{item.company.name}}
    </li>
  </ul>

  <button :class="{'is-active': !sort}"  @click="setSort('')">all</button>
  <button :class="{'is-active': sort === 'name'}"  @click="setSort('name')">asc/desc by name</button>
</div>