How to sort array by name and price in Vuejs?-CodePudding

var example1 = new Vue({
  el: '#example-1',
  data: {
    // sort: item,
    items: [{
        price: '1',
        name: 'vv'
      },
      {
        price: '22',
        name: 'vv'
      },
      {
        price: '55',
        name: 'vv'
      },
      {
        price: '77',
        name: 'vv'
      },
      {
        price: '123',
        name: 'vv'
      },
      {
        price: '53',
        name: 'vv'
      },
    ]
  },
  methods: {
    sortBy(arr, key) {
      return arr.sort(function(a, b) {
        if (a[key] < b[key]) return -1
        if (a[key] > b[key]) return 1
        return 0
      })
    },
  }
})

<!-- v-for - sort array by name and price -->
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }} {{ item.name }}
  </li>
</ul>


<hr />
<div class="bbb">
  <button @click="sortbyname">name</buttton><br/>
<button @click="sortbyname">message</buttton>
</div>

How to sort array by name and price in Vuejs?

I have array of values, where I looped entire items and displayed initially, later. i have taken two buttons one for sorting array by name, and another for sorting array by price.

I took method called sortBy and trying to sory array, but here comes the problem, where i am unable to sort and not sure how to link with array values.

codepen link:- https://codepen.io/dhanunjayt/pen/oNGXjZL

reference codepen link:- https://codepen.io/dustindowell/pen/OXMEaG

CodePudding user response：

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>