Vue.js orderBy無法正確使用大寫和小寫

Question

我正在使用Laravel 5.2 + Vuejs + Vueify開發一個應用程序，並且在表上列出了一個對象數組，但是有兩個問題。

1. orderBy可以用大寫和小寫分隔

orderBy與記錄分開應用，其中第一個字母為大寫和小寫！

2.過濾器領域的特殊字符

由於字母A上的重音，在過濾器字段上鍵入“ Água ”找不到“ Agua”結果，我想忽略該重音...這可能嗎？

JS文件

Vue.filter('pmlOrderBy', function(arr, sortKey, reverse) {

  if (!sortKey) {
    return arr;
  }
  var order = (reverse && reverse < 0) ? -1 : 1;

  // sort on a copy to avoid mutating original array
  return arr.slice().sort(function(a, b) {
    if (sortKey !== '$key') {
      if (Vue.util.isObject(a) && '$value' in a) a = a.$value;
      if (Vue.util.isObject(b) && '$value' in b) b = b.$value;
    }
    a = Vue.util.isObject(a) ? Vue.parsers.path.getPath(a, sortKey) : a;
    b = Vue.util.isObject(b) ? Vue.parsers.path.getPath(b, sortKey) : b;

    a = a.toLowerCase();
    b = b.toLowerCase();

    //         return a.localeCompare(b) * order;

    return a === b ? 0 : a > b ? order : -order;
  });
});


new Vue({

  el: 'body',

  data: {
    record: {},
    selected: [],
    list: [{
      name: 'Google',
      id: 1,
    }, {
      name: 'Água',
      id: 2,
    }, {
      name: 'Agua Branca',
      id: 3,
    }, {
      name: 'first time',
      id: 4,
    }, {
      name: 'boston',
      id: 5,
    }, {
      name: 'Type',
      id: 6,
    }, {
      name: 'Facebook',
      id: 7,
    }, ],
    sortProperty: 'name',
    sortDirection: 1,
  },

  methods: {

    sort: function(property) {
      this.sortProperty = property;
      this.sortDirection = (this.sortDirection == 1) ? -1 : 1;
    },

  }

});

HTML文件

<div class="container">
  <input type="text" v-model="textFilter" class="form-control" placeholder="Type to filter...">
</div>

<hr>

<div class="container">
  <div class="alert alert-info">Click at the TH to sort</div>
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th @click="sort('id')" style="cursor: pointer;">Id</th>
        <th @click="sort('name')" style="cursor: pointer;">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="r in list | filterBy textFilter | pmlOrderBy sortProperty sortDirection">
        <td class="text-center" style="width:90px">{{ r.id }}</td>
        <td>{{ r.name }}</td>
      </tr>
    </tbody>
  </table>
</div>

JS斌

====編輯====

當泰勒（Taylor）和瑞寧鏈（RainningChain）幫助我吼叫時，我們快到了！

我找到了這篇文章並更新了上面的代碼和JS Bin，但是現在的問題是：

• 它排序正確，但是如果我嘗試對其他列單擊另一個TH進行排序，則會剎車。
• 特殊角色仍然存在的問題= /

任何人？

謝謝！

Answer 1

為此，您必須創建自己的過濾器。

擴展Vue的orderBy過濾器，這將是對您兩個問題的實用解決方案。

// This was originally copied from the Vue source
// File: src/filters/array-filters.js
function orderByWords (arr, sortKey, reverse) {
  arr = convertArray(arr)
  if (!sortKey) {
    return arr
  }
  var order = (reverse && reverse < 0) ? -1 : 1
  // sort on a copy to avoid mutating original array
  return arr.slice().sort(function (a, b) {
    if (sortKey !== '$key') {
      if (isObject(a) && '$value' in a) a = a.$value
      if (isObject(b) && '$value' in b) b = b.$value
    }
    a = isObject(a) ? getPath(a, sortKey) : a
    b = isObject(b) ? getPath(b, sortKey) : b
    return a.localeCompare(b) * order
  })
}

篩選器的內容如下所示： a.localeCompare(b)

String.prototype.localeCompare方法比較兩個字符串，並根據初始字符串（ a ）在比較字符串（ b ）之前還是之后，返回一個整數值。

更新

事實證明，由於Number.prototype.localeCompare不存在而Number.prototype.localeCompare篩選器損壞了……誰知道？

因此，我們可以使用一些類型轉換技巧來使它適用於任何事物。

Vue.filter('pmlOrderBy', function (arr, sortKey, reverse) {
    if (!sortKey) {
        return arr;
    }
    var order = (reverse && reverse < 0) ? -1 : 1;

    // sort on a copy to avoid mutating original array
    return arr.slice().sort(function (a, b) {
        if (sortKey !== '$key') {
            if (Vue.util.isObject(a) && '$value' in a) a = a.$value;
            if (Vue.util.isObject(b) && '$value' in b) b = b.$value;
        }
        a = Vue.util.isObject(a) ? Vue.parsers.path.getPath(a, sortKey) : a;
        b = Vue.util.isObject(b) ? Vue.parsers.path.getPath(b, sortKey) : b;

        return (''+a).localeCompare((''+b)) * order;
    });
});

關鍵行是過濾器的最后一行。 (''+a).localeCompare將a強制轉換為String ，然后調用localeCompare方法。