Vue.js Displaying Filtered/Sorted Results 顯示過濾/排序後的結果

如何把現有的陣列，在做完過濾後存在另一個新的陣列裡？如何讓頁面即時顯示這個新的陣列列表？要產生新陣列的條件有哪些？原本的陣列、輸入框輸入了什麼資料？只要拿得到這兩個資料，就可產生新的過濾後的陣列。

我們來看一下，該如何進行？ 或是先來看一下完整的原始碼

輸入框先以v-model綁定資料，這個資料是過濾的條件searchName，需要去實例初始化它。

過濾條件後所產生的新陣列filterPersons則是透過searchName和persons陣列所計算產生出來的，所以我們需要一個在實例中的計算屬性 computed 的方法，去產生新的陣列filterPersons。這個方法的回傳值即是顯示的結果。

將原本的陣列persons套用filter()方法，再以indexOf()方法，用searchName !== -1ˋ 這個條件去查找的結果，存入新陣列fPersons中。

fPersons = persons.filter(p => p.name.indexOf(searchName !== -1));

在過濾陣列的方法中，要先把需要的資料數據取出來，並將他們放在一個物件中，再開始過濾陣列的動作，把過濾產生的新陣列，用sort()方法來排序。

如果排序的功能只有兩種，通常會以布林值的方式來做切換，但在我們的排序功能的按鈕，除了升序和降序外，還有恢復原來排列的第三種，所以我們可以以數字來作為排序分類的指標數。
代表排序分類的orderType指派為：0 代表原本排序、1 代表升序, 2 代表降序。

在三個按鈕
上使用@click="setOrderType(2)監聽的方法、在實例的 methods 中增加setOrderType()方法，並將排序的方法寫在實例的計算屬性filterPersons()裡。而setOrderType()要做的事情，就是把這個方法的參數，指向實例中的 OrderType()。

// filterPersons()裡 排序的部分
// 排序
// 確定排序的指標 orderType 不是 0 才繼續排序下去
if (orderType !== 0) {
  fPersons.sort(function(p1, p2) {
    // 1代表降序, 2代表升序
    if (orderType === 1) {
      // 降序
      return p2.age - p1.age;
      // name 降序
      // return p2.name - p1.name
      // return p2.name.localeCompare(p1.name)
    } else {
      // 升序
      return p1.age - p2.age;
      // name 升序
      // return p1.name - p2.name
      // return p1.name.localeCompare(p2.name)
    }
  });
}

在上例我們是以age來當排序條件，如果想要以name字母順序為排序條件，則可將條件的回傳值更改為return p1.name.localeCompare(p2.name)就會依字母順序排列了。

// setOrderType()部分
methods: {
        setOrderType(orderType) {
          this.orderType = orderType
        }

有了這些功能，我們就可以讓 Todo List 有過濾的更多功能了。