[Vuejs]-Unable to repeat sorting a second time vuejs

by

0👍

✅

You need to have a sortOrder defined at the same level as sortKey. When a column is clicked,

  1. If the column is already the sortKey, reverse the sortOrder for the column (otherwise, set sortKey)
  2. In any case, set that sortOrder from the column’s sortOrder
var columns = [{
  name: 'Type',
  key: 'type',
  sortOrder: 1,
  callback: function(item) {
    if (item.type = 'issue')
      return '<i class="fa fa-bars"></i> I-' + item.id;
    else
      return '<i class="fa fa-check-square-o"></i> R-' + item.id;
  }
}, {
  name: 'Name',
  key: 'name',
  sortOrder: 1
}, {
  name: 'Created On',
  key: 'created_at',
  sortOrder: 1
}, {
  name: 'Due Date',
  key: 'due_date',
  sortOrder: 1
}, {
  name: 'Priority',
  key: 'priority',
  sortOrder: 1
}, {
  name: 'Assigned To',
  key: 'email',
  sortOrder: 1
}, {
  name: 'Severity',
  key: 'severity',
  sortOrder: 1
}, {
  name: 'Workflow',
  key: 'workflow',
  sortOrder: 1
}];

var data = [{
  id: 81,
  name: "a",
  workflow: "backlog",
  created_at: "1",
  user_id: 1,
  due_date: "04:09:19	2016-08-06",
  severity: "se",
  priority: "1",
  type: "1",
  email: "sdfds@gmail.com"
}, {
  id: 83,
  name: "Add files or images",
  workflow: "deployed",
  created_at: "2016-08-01 03:09:19",
  user_id: 5,
  due_date: "2016-08-06",
  severity: "Major",
  priority: "1",
  type: "issue",
  email: "test@gmail.com"
}];



Vue.config.debug = true;

Vue.component('testnetic-table', {
  template: '#testnetic-table',
  props: ['data', 'columns'],
  data: function() {
    return {
      searchKey: '',
      sortKey: '',
      sortOrder: -1
    };
  },
  methods: {
    sortBy: function(index) {
      const col = this.columns[index];
      if (this.sortKey === col.key) {
        col.sortOrder *= -1;
      } else {
        this.sortKey = this.columns[index].key;
      }
      this.sortOrder = col.sortOrder;
    },
    display: function(item, key, index) {
      if (this.columns[index].callback) {
        return this.columns[index].callback(item);
      } else
        return item[key];
    }
  }
});



new Vue({
  el: '#test',
  data: function() {
    return {
      columns: columns,
      data: data
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"> </head>

  <body>

    <script type="text/x-template" id="testnetic-table">
      <input type="text" v-model="searchKey">
      <table class="table table-hover table-light table-responsive">
        <thead>
          <tr>
            <th v-for="item in columns" @click="sortBy($index)">
              {{ item.name | capitalize}}
              <i class="fa" :class="item.sortOrder > 0 ? 'fa-sort-desc' : 'fa-sort-asc'"></i>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in data
                | filterBy searchKey
                | orderBy sortKey sortOrder">
            <td v-for="cell in columns">
              {{{ display(item,cell.key,$index)}}}
            </td>
          </tr>
        </tbody>
      </table>
    </script>

    <div id="test">
      <testnetic-table :columns="columns" :data="data"></testnetic-table>
    </div>

  </body>

</html>

Leave a comment