[Vuejs]-How to sort array by conditions in Vuejs?

by

0👍

✅

You could make use of computed properties.

Logic

  • Loop the array with a computed property.
  • Update the key fror sorting on button click, which makes the computed property to re execute.

You should not use duplicate computed properties. All your listing logic should be done in a single computed method as done below

var example1 = new Vue({
  el: '#example-1',
  data: {
    // sort: item,
    sortKey: 'name',
    checked: false,
    searchString: "",
    items: [
      { price: '1', name: 'mm' },
      { price: '22', name: 'aa' },
      { price: '55', name: 'dd' },
      { price: '77', name: 'gg' },
      { price: '123', name: 'kk' },
      { price: '53', name: 'mn' },
    ]
  },
  computed: {
    sortedItems: function () {
      let searchString = this.searchString;
      const sortedArray = this.items.sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1
        if (a[this.sortKey] > b[this.sortKey]) return 1
        return 0
      });
      if (!searchString) { 
        return sortedArray;
      } else {
        searchString = searchString.trim().toLowerCase();
        const search_array = sortedArray.filter((item) => {
          if (item.name.toLowerCase().indexOf(searchString) !== -1) {
            return item;
          }
        });
        return search_array;
      }
    },
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="example-1">
  <ul>
    <input type="text" v-model="searchString" placeholder="Filter" />
    <p>sortKey = {{sortKey}}</p>
    <li v-for="item in sortedItems">
      <input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="item.checked" />
      {{ item.price }} - {{ item.name }}
    </li>
  </ul>
  <div class="cecont" v-if="!checked">
    <p>text content</p>
  </div>
  <hr />
  <div class="bbb">
    <button @click="sortKey = 'name'">name</buttton><br />
      <button @click="sortKey = 'price'">price</buttton>
  </div>
</div>

Leave a comment