# Day 05 分類資料篩選

###### tags: `Vue`

<style>.red{color:red}</style>


### 分類catalog篩選製作

html模板使用和[Day04新增列表資料](https://hackmd.io/1TbML8dRRpC3NjM5pRbXTA?both)一樣模板,可以去Day04 最下面jsfiddle link去找 ,只是Day 05 分類資料篩選的輸入框刪除<kbd>@keyup.enter="inpuHandler"</kbd> ,和 new vue裡面的 <kbd>methods</kbd>function ,並且將select option新增最上面<kbd> <option>全部</option></kbd> ,將data的input.type裡資料改成<kbd> type: '全部',</kbd>

所有處理資料都使用<kbd>computed</kbd> , 所以這邊去new vue部分新增

let vm = new Vue({
            el: '#app',
            data: data,
            computed: {

            }
        })

### 綁定select catalog

在computed新增一個新的function <kbd>typeMenu(){ }</kbd> , 篩選有兩種狀況

1. <kbd>input.type</kbd> 不等於option <kbd>全部</kbd> ,進行篩選動作 <kbd> filter</kbd>篩選this.menu ,畫面分類 <kbd>item.type</kbd>必須等於select的<kbd>this.input.type</kbd> 。

2. <kbd>input.type</kbd> option <kbd>全部</kbd>,那就return所有資料 <kbd>this.menu</kbd> 。

而原版渲染item畫面的html是綁定<kbd>v-for="(item , index) in menu"</kbd>,
現在改為<kbd>v-for="(item , index) in typeMenu"</kbd>

 <div class="row datalist ml-0 mt-5 ">
                <div class="col-55  libg mx-2 my-3 vue-list d-flex" v-for="(item , index) in typeMenu">
                    <div class="nolist ml-n2 pt-2 pl-2">{{index + 1}}</div>
                    <div class="catolog ml-n1 pt-2">{{item.type}}</div>
                    <a class="pl-2 letter-sp-1 text-decoration-none dark-g vue-title pt-2"
                        target="vue-iron ">{{item.title}}</a>

                </div>

            </div>

 let vm = new Vue({
            el: '#app',
            data: data,
            computed: {
             
                typeMenu(){
                    if(this.input.type !== '全部') {

                        return this.menu.filter(item => {
                        return item.type == this.input.type

                        })
                       
                    } else {
                        return this.menu
                    }
                },

                

            }

        })


### 進一步文字輸入框使用輸入文字篩選

文字輸入框是select篩選完後繼續篩選,所以是放在select的 typeMenu() function後面 ,這邊給他命名為<kbd>titleMenu()</kbd>

#### 輸入框filter操作邏輯

如果輸入框裡的文字<kbd>this.input.title</kbd>篩選<kbd>filter</kbd>,
將this.typeMenu裡面item裡字串<kbd>item.title</kbd>和輸入框裡的文字<kbd>this.input.title</kbd>做比對<kbd>indexOf</kbd>,如果得到的值不等於<kbd>-1</kbd>,表示有找到配對值,渲染出畫面 。反之輸入原版select標籤篩選過後畫面<kbd>this.typeMenu</kbd>

[String.prototype.indexOf()](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)

> indexOf() 方法返回調用它的對像String 中第一次出現的指定值的索引，從fromIndex處進行搜索。如果未找到該值，則返回-1。

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

                        })
                    } else {
                        return this.typeMenu
                    }
                }

原本渲染html模板綁的是<kbd>v-for="(item , index) in typeMenu"</kbd>,現在把剛做好的titleMenu()替換掉 , <kbd>v-for="(item , index) in titleMenu"</kbd>

註:第一次做這種小作業是去年,被一個html 綁的v-for=" item in data " data改兩三次搞得暈頭轉向 , 這陣子是第三次做類式小作業,看了 [Alex 宅幹嘛](https://www.youtube.com/watch?v=Day303Ez-bA&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=7) 影片突然觀念懂了 ! 超開心,

**觀念整理如下:**

1. 其實這種資料處理類需要依序處理,第一次綁定 <kbd>v-for="(item , index) in menu</kbd>, 是原始未處理data渲染綁定

2. select經過 <kbd>input.type</kbd> 篩選,第二次綁定<kbd>v-for="(item , index) in typeMenu </kbd> 是第二層資料處理 ,裡面有包含<kbd>this.menu</kbd> , 所以可以直接替換掉<kbd>v-for="(item , index) in menu</kbd>

3.在input輸入框第三次綁定<kbd>v-for="(item , index) in titleMenu </kbd>,篩選比對<kbd>indexOf</kbd>輸入框文字<kbd>this.input.title</kbd>和經過select標籤篩選過結果,是第三層資料處理 ,裡面有包含<kbd>this.typeMenu</kbd>所以可以直接替換掉<kbd>v-for="(item , index) in typeMenu</kbd>

[完整原始碼](https://jsfiddle.net/Harrmonia/mu5vwhoa/1/)

參考網路資訊
[[ Vue.js 手牽手，一起嗑光全家桶 ] 開胃餐點 - 期間限定篩選佐資料轉換](https://www.youtube.com/watch?v=Day303Ez-bA&list=PLEfh-m_KG4dYor8h4Hi2lqKJ0xqNTFh16&index=7)

*講師個人頻道資料很豐富,情況允許大家多多看完影片廣告,和每個月訂閱扣款donate,當做請講師喝杯咖啡犒賞辛苦無私