Как я могу составить список и добавить функцию сортировки с помощью Vue JS? - PullRequest
Новая
       72

Как я могу составить список и добавить функцию сортировки с помощью Vue JS?

1 голос
/ 27 мая 2020

Я делаю функцию сортировки по Vue js

Я хотел бы составить список по порядку идентификаторов по умолчанию, тогда функция сортировки может быть запущена, нажав asc/desc by name button.

Кроме того, при нажатии кнопки all список снова сортируется по порядку идентификаторов и добавляется класс с именем 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>

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Вы можете сделать это проще с помощью computed и switch. Код: 

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>
1 голос
/ 27 мая 2020 

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>
...