07. 資料篩選

可透過選單或關鍵字篩選資料，再呈現到畫面上：

上個單元的 input 用來增加資料，這個單元的 input 則用來進行資料篩選。主要使用 Vue 的 computed 功能去處理要呈現到畫面的資料。

摘要

1. 依選單類型篩選資料：使用 computed 增加 typeMenu 去回傳篩選後符合的資料。
2. 依輸入的關鍵字篩選資料：在 typeMenu 裡面比對關鍵字，產生新的 titleMenu。

依選單類型篩選

如果 input 類型為 " 全部 "，則顯示原本的 menu (this.menu)。否則，就從 menu 中篩選出與 input 類型一樣的資料。

computed(){
    typeMenu() {
      if (this.input.type === "全部") {
        return this.menu;
      } else {
        return this.menu.filter(item => {
          return item.type === this.input.type;
        })
      }
    }
}

依關鍵字篩選

如果沒有輸入 title ，則依照 typeMenu 的結果執行。 否則，就選出 typeMenu 的資料中，與 input 有同樣字串的資料。

titleMenu() {
  if (this.input.title) {
    return this.typeMenu.filter(item => {
      return item.title.toLowerCase().indexOf(this.input.title.toLowerCase()) != -1
    })
  } else {
    return this.typeMenu;
  }
}

做文字比對時，要讓大小寫一致，所以用 toLowerCase() 將文字都轉成小寫。而 indexOf() 的值 != -1 表示有找到資料，則該筆資料會被保留下來。

以上程式碼再使用變數簡化：

titleMenu() {
  if (this.input.title) {
    return this.typeMenu.filter(item => {
      let content = item.title.toLowerCase();
      let keyword = this.input.title.toLowerCase();
      return content.indexOf(keyword) != -1
    })
  } else {
    return this.typeMenu;
  }
}