18. Vue 常用清單操作執行個體 - 根據關鍵字實作數組的過濾

需求

前面介紹了清單操作中的資料新增、删除的功能，本篇章來看看關鍵字查詢的功能。

處理步驟

在VM執行個體中定義關鍵字參數 searchName .

var vm = new Vue({
            el: '#app',
            data: {
                searchName:'', // 關鍵字
                ....
            },

複制

要在篩選框綁定關鍵字資料到 VM 執行個體中的 searchName 屬性，後續用來基于這個 searchName 來過濾數組資料。

<!-- 搜素關鍵字 -->
<input v-model="searchName" type="text" class="form-control" id="input_keywords" placeholder="輸入關鍵字">

複制

3.在使用

v-for

指令循環每一行資料的時候，不再直接

item in list

，而是

in

一個過濾的methods 方法，同時，把過濾條件

searchName

傳遞進去：

<tr v-for="item in search(searchName)" :key="item.id">

複制

在VM執行個體的methods方法中定義過濾 search() 方法，在資料過濾的方法上，可以有兩種處理方式。

4.1 首先建立一個新的數組

newList

，然後使用

forEach

方法周遊資料數組

list

，判斷關鍵字

searchName

是否包含在周遊資料中，可以使用

if (item.name.indexOf(searchName) != -1)

來進行判斷，如果存在，那麼則會為

，如果

searchName

為空值，則會

。在這種情況下，則将資料加入到新的數組

newList

中，然後提供清單渲染資料。

methods: {
            search(searchName) {
                // 建立新的數組newList
                var newList = [];
                // 周遊資料，判斷關鍵字是否存在，存在則加入newList中
                this.list.forEach(item => {

                    // 如果indexOf為-1，則說明關鍵字不存在該字元串中，
                    // 反之，存在或者searchName為空字元串
                    if (item.name.indexOf(searchName) !== -1) {
                        newList.push(item)
                    }

                });
                // 将過濾後的newList傳回，提供清單資料渲染
                return newList
            },
        }

複制

浏覽器實作關鍵字搜尋效果如下：

4.2 除了使用

forEach

周遊數組外，還可以使用

filter

過濾數組。上面使用

forEach

方法還要自己建立一個

newList

來處理資料，而

filter

則是直接傳回數組，不需要單獨去建立。還有上面使用

if (item.name.indexOf(searchName) != -1)

來判斷關鍵字是否包含在字元串中，這裡還可以使用

includes

方法。

注意：在

ES6

中，為字元串提供了一個新方法

includes

，叫做

String.prototype.includes('要包含的字元串')

，如果包含，則傳回

true

，否則傳回

false

methods: {

            search(searchName) {

                // 使用filter則是傳回過濾的資料自動生成數組
                return this.list.filter(item => {
                    // 注意 ： ES6中，為字元串提供了一個新方法，
                    // 叫做  String.prototype.includes('要包含的字元串')
                    //  如果包含，則傳回 true ，否則傳回 false
                    //  contain
                    if (item.name.includes(searchName)) {
                        return item
                    }
                })

            },
        }

複制

浏覽器實作關鍵字搜尋效果如下：