如何使用vuejs過濾器

標籤：資料來源   自訂   接受   ops   watch   user   動態   com   資料結構   

大家再使用vue做項目時，查詢功能當然必不可少，這就得使用vue強大的filter啦。其實vue內建的兩個屬性filterBy和orderBy已經能滿足部分需求了，但是她更大的的魅力在於自訂filter（之後的文章中會分享），正好我最近做的項目中用到了這個。先給大家看下需求吧。如，這是一個通訊錄頁面，當我們在搜尋欄中輸入關鍵字時需要展示相應的員工，同時還得去掉A、B這樣的字母索引，並且輸入的關鍵字可以是中文也可以是拼音。

    

 

 

 該頁面引入搜尋欄組件search-bar以及連絡人群組件user-list,這個搜尋欄組件要做的事很簡單，因為我們查詢的這個參數是動態，所以只需要在vue上掛載一個v-model即可，然後它相對於這個頁面來說是子組件，父子傳值就得用props，所以還要用props接收一下，簡單寫下該組件大家看明白意思即可。

// 組件search-bar<input type="search" v-model="okr_owner"/>props: {        okr_owner: {            type: String        }}

// 通訊錄頁面<template>    <search-bar :okr_owner.sync="key_word"></search-bar>    <user-list :filter_key="key_word"></user-list></template>

// 組件 user-list<li v-for="single_user in user_list.members | filterBy filter_key in ‘user.u_name‘ ‘okr_owner‘ | orderBy ‘okr_owner‘"> props: {        filter_flag: {            type: Boolean        },        filter_key:{            type: String        }}

 

然後我們需要在該頁面引入這個搜尋欄子組件,這裡我用到了sync，因為props只能父傳子，不能子傳父，但是我們這上面引用了兩個組件，就是說搜尋欄組件中的data要拿到連絡人群組件中來用，所以需要一個欄位(key_word)將兩者溝通起來，當我們不寫sync時大家可以看到，父的確傳值給子組件了，但是子組件中的okr_owner變化之後並沒有傳給父組件中的key_word，這樣連絡人群組件就接受不到資料來源，所以我們需要給他加上sync（雙向繫結，父傳子和子傳父），連絡人群組件中的filter才可以生效。

在user-list組件中我們需要遍曆連絡人清單，filter_key用來傳給該組件，和搜尋欄組件一樣，也用props接收一下，並且在裡面插入要過濾的內容，

filterBy是返回過濾後的數組，orderBy是排序，前者的使用方法是filterBy 一個key(欄位)，in xxx 就是指搜尋欄位，這裡需要注意的是in後面跟的必須是obj裡面的key，因為我們的需求是同時保證輸入漢字或者拼音都能查詢，所以in後面跟的是okr_owner和user.u_name(這是vue渲染的資料，我們展示該連絡人用的是裡面的u_name，okr_owner則為拼音)，下面附上資料結構。對於在搜尋時如何去掉這些字母索引，我們只需要在通訊錄頁面中的<user-list>加入一個欄位，然後使用watch來監聽一下key_word即可。

 

如何使用vuejs過濾器