Vue2-filter-list
Prebuilt filters for Vue.js
Table of contents:
Get Started
NPM
npm install vue2-filter-list
When used with a module system, you must explicitly install the filters via Vue.use()
:
Vue
You don't need to do this when using global script tags.
To use one of the predefined methods (such as limitBy
, filterBy
, find
, or orderBy
) in your component, you also need to add Vue2Filters.mixin
to mixin list:
... mixins: VueFilterListmixin ...
Collection
after
get a collection(array or object) and specified count, and returns all of the items in the collection after the specified count.
collection : name: 'foo' name: 'bar' name: 'baz' name: 'zap'
{{ col.name }}<!--result: baz zap-->
afterWhere
get a collection and properties object, and returns all of the items, in the collection after the first that found with the given properties, including it.
orders : id: 1 customer: name: 'foo' date: 'Tue Jul 15 2014' id: 2 customer: name: 'foo' date: 'Tue Jul 16 2014' id: 3 customer: name: 'foo' date: 'Tue Jul 17 2014' id: 4 customer: name: 'foo' date: 'Tue Jul 18 2014' id: 5 customer: name: 'foo' date: 'Tue Jul 19 2014'
order: {{ order.id }}, {{ order.date }}<!--result: order: 3, Tue Jul 17 2014 order: 4, Tue Jul 18 2014 order: 5, Tue Jul 19 2014-->
before
get a collection(array or object) and specified count, and returns all of the items in the collection before the specified count.
collection : name: 'foo' name: 'bar' name: 'baz' name: 'zap'
{{ col.name }}<!--result: foo bar-->
beforeWhere
get a collection and properties object, and returns all of the items, in the collection before the first that found with the given properties, including it.
orders : id: 1 customer: name: 'foo' date: 'Tue Jul 15 2014' id: 2 customer: name: 'foo' date: 'Tue Jul 16 2014' id: 3 customer: name: 'foo' date: 'Tue Jul 17 2014' id: 4 customer: name: 'foo' date: 'Tue Jul 18 2014' id: 5 customer: name: 'foo' date: 'Tue Jul 19 2014'
order: {{ order.id }}, {{ order.date }}<!--result: order: 1, Tue Jul 15 2014 order: 2, Tue Jul 16 2014 order: 3, Tue Jul 17 2014-->
concat
Concatenates an array/object into another one.
array : a: 1 a: 2 object : 0: a: 3 1: a: 4
{{ elm.a }} <!--result:1 2 3 4--> {{ elm.a }} <!--result:3 4 1 2-->
filterBy
- Arguments
- {Array} [items]
- {String} [query]
- {String} [searchKey]
<!-- only items that contain the target string "hello" will be displayed --><!-- the filter will only search for "Jack" in the name field of each user object --><!-- the filter will only search for "Bonnie" in the name or age fields of each user object -->
find
- Arguments
- {Array} [items]
- {String} [query]
- {String} [searchKey]
<!-- only the first item that contains the target string "hello" will be displayed --><!-- the filter will only search for "Bonnie" in the name or age fields of each user object and return the first result -->
flatten
Flattens a nested array (the nesting can be to any depth).
If you pass shallow, the array will only be flattened a single level
weirdArray : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
{{ elm }},<!--result:1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
fuzzy
fuzzy string searching(approximate string matching). Read more
note: use fuzzyBy to filter by one property to improve performance
Usage: fuzzy(collection,search,caseSensitive[optional])
books : title: 'The DaVinci Code' author: 'F. Scott Fitzgerald' title: 'The Great Gatsby' author: 'Dan Browns' title: 'Angels & Demons' author: 'Dan Louis' title: 'The Lost Symbol' author: 'David Maine' title: 'Old Man\'s War' author: 'Rob Grant'
{{ book.title }}<!--case sensitive--> {{ book.title }}
isEmpty
get collection or string and return if it empty[Boolean]
<!-- ..... --><!--some replacer msg--> no content to show
join
Joins the contents of a collection into a string.
By default, it will join elements with a single space, but you can provide your own delimiter.
Example:
names : 'John' 'Sebastian' 'Will' 'James'
{{ names | join(', ') }}<!-- Will print "John, Sebastian, Will, James" -->
limitBy
- Arguments
- {Number|Array} [items]
- {Number} [limit]
- {Number} [offset]
<!-- only display first 10 items -->{{ item }}<!-- display items 5 to 15 -->{{ item }}<!-- with a Range -->{{ n }}
orderBy
- Arguments
- {Array} [items]
- {String} [sortKey]
- {Number} [order] - default: 1
Sort users by name:
{{ user.name }}
In descending order:
{{ user.name }}
Sort primitive values:
{{ name }}
range
Return a new collection from a given length, start, increment, and callback
By default start is 0, increment is 1, and callback is null.
Usage: range(collection,length,start,increment,callback)
{{i}},<!--result:0,1,2,-->
{{i}},<!--result:10,11,12,13,14,15,16,17,18,19,-->
{{ i }},<!--result:5, 7, 9, 11, 13, 15, 17, 19, 21, 23-->
{{ i }},<!--result:4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24-->
{ return i * 2;}
{{ i }},<!--result:8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48-->
removeWith
comparison for each element in a collection to the given properties object,
returning an array without all elements that have equivalent property values.
collection : id: 1 name: 'foo' id: 1 name: 'bar' id: 2 name: 'baz'
{{ obj.name }}<!-- result: baz--> {{ obj.name }}<!-- result: bar baz
reverse
Reverse the order of the elements in a collection
users : id: 1 name: 'bazzy' id: 2 name: 'dazzy' id: 3 name: 'lazzy'
user: {{ user.id }}, {{ user.name }}<!--result: user: 3, lazzy user: 2, dazzy, user: 1, bazzy-->
where
comparison for each element in a collection to the given properties object,
returning an array of all elements that have equivalent property values.
collection : id: 1 name: 'foo' id: 1 name: 'bar' id: 2 name: 'baz'
{{ obj.name }}<!-- result: foo bar--> {{ obj.name }}<!-- result: foo -->
String
ucfirst
ucfirstFilter get string as parameter and return it capitalized
{{ 'foo bar baz' | ucfirst }} <!--result:Foo Bar Baz-->
uppercase
uppercase get string as parameter and return it uppercase
{{ 'foo bar baz' | uppercase }} <!--result:FOO BAR BAZ-->
lowercase
lowercase get string as parameter and return it lowercase
{{ 'Foo Bar Baz' | lowercase }} <!--result:foo bar baz-->
uriEncode
get string as parameter and return encoded uri
{{ data.name | uriEncode }}
uriComponentEncode
get string as parameter and return encoded uri component
{{ 'Some&strange=chars' | uriComponentEncode }}
slugify
Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument
{{ 'Some string with spaces' | slugify }}<!--replace with given argument-->{{ 'Some string with spaces' | slugify('=') }}<!--result:some-string-with-spaces some=string=with=spaces-->
latinize
Remove accents/diacritics from a string
{{ 'Sòme strÏng with Âccénts' | latinize }}<!--result: Some strIng with Accents-->
startsWith
return whether string starts with the starts parameter.
usage: string | startsWith('start',case-sensitive[optional])
{{ 'Lorem ipsum' | startsWith('lorem') }} {{ 'Lorem Ipsum' | startsWith('lorem',true) }} <!--result: true false
endsWith
return whether string ends with the ends parameter.
usage: string | endsWith('ends',case-sensitive[optional])
{{ 'image.JPG' | endsWith('.jpg') }} {{ 'image.JPG' | endsWith('.jpg', true) }} <!--result: true false
stripTags
strip out html tags from string
text : '<p class="paragraph">Lorem Ipsum is simply dummy text of the printing...</p>'
{{ text | stripTags }}<!--result:Lorem Ipsum is simply dummy text of the printing...-->
stringular
get string with {n} and replace match with enumeration values
{{ 'lorem {0} dolor {1} amet' | stringular('ipsum','sit') }}{{ '{3} {0} dolor {1} amet' | stringular('ipsum','sit',null,'lorem') }} <!-- result:<p>lorem ipsum dolor sit amet</p><p>lorem ipsum dolor sit amet</p>--> {{ 'lorem {0} dolor sit amet' | stringular }}<!--result:<p>lorem {0} dolor sit amet</p>
phoneUS
Format a string or a number into a us-style phone number
{{ 1234567890 | phoneUS }} <!--result:<p>(123) 456-7890</p>
truncate
truncates a string given a specified length, providing a custom string to denote an omission.
usage: string | truncate([length],[suffix-optional], [preserve-optinal])
text : 'lorem ipsum dolor sit amet'
<!--should not cut words in the middle if preserve is true-->{{ text | truncate(7, '...', true) }} {{ text | truncate( 13, '...') }} <!--should not touch string that shorter than the provided length -->{{ text | truncate( 50, '...') }} <!--result:lorem ipsum...lorem ipsum d...lorem ipsum dolor sit amet
split
truncates a string given a specified length, providing a custom string to denote an omission.
usage: string | split([delimiter], [skip-optional])
text : 'lorem ipsum dolor sit amet'
{{ text | split(' ') }} {{ text | split(' ', 2)}} <!--result:['lorem', 'ipsum', 'dolor', 'sit', 'amet']['lorem ipsum dolor', 'sit', 'amet']
reverse
Reverses a string
text : 'lorem ipsum dolor sit amet'
{{ text | reverse }}<!--result:tema tis rolod muspi merol
wrap
Wrap a string with another string
usage: string | wrap(string, string[optional])
{{ 'foo' | wrap('/') }}{{ 'foo' | wrap('{{', '}}') }}<!--result:/foo/{{foo}}
trim
Strip whitespace (or other characters) from the beginning and end of a string
{{ ' foo ' | trim }}{{ 'foobarfoo' | trim('foo') }}<!--result:foobar
ltrim
Strip whitespace (or other characters) from the beginning of a string
{{ 'barfoobar' | ltrim('bar') }}<!--result:foobar
rtrim
Strip whitespace (or other characters) from the end of a string
{{ 'barfoobar' | rtrim('bar') }}<!--result:barfoo
repeat
Repeats a string n times
Usage: string | repeat(n, separator[optional])
{{ 'foo' | repeat(3, '-') }}<!--repeat:foo-foo-foo
test
Test if a string match a pattern
Usage: string | test(pattern, flag[optional])
{{ '15/12/2003' | test('^[0-9]{2}[/]{1}[0-9]{2}[/]{1}[0-9]{4}$', 'i') }}{{ '0123456' | test('\\D', 'i') }}<!--result:truetrue
match
Return an array of matched element in a string
Usage: string | match(pattern, flag[optional])
{{ '15/12/2003' | match('\\d+', 'g') }}<!--result:['15', '12', '2003']
Math
max
max find and return the largest number in a given array.
if an expression
is provided, will return max value by expression.
Usage: array | max(expression[optional])
users : user: score: 988790 user: score: 123414 user: rank : 988999 user: score: 987621
{{ [1,2,3,4,7,8,9] | max }} {{ users | max('user.score || user.rank') }}<!--result:* 9* { user: { rank : 988999 } }
min
min find and return the lowest number in a given array.
if an expression
is provided, will return min value by expression.
Usage: array | min(expression[optional])
users : user: score: 988790 user: score: 123414 user: score: 987621
{{ [1,2,3,4,7,8,9] | min }} {{ users | min('user.score') }}<!--result:* 1* { user: { score: 123414 } }
abs
Returns the absolute value of a number
The absolute value of {{val}} is {{val | abs}}<!--result:* The absolute value of -1.2 is 1.2* The absolute value of 2.3 is 2.3* The absolute value of -3.4 is 3.4* The absolute value of '4.5' is 4.5
percent
Percentage between two numbers
Usage: number | percent(total, round[optional])
, round by default false.
{{ 23 | percent(500) }}{{ 23 | percent(500, true) }}<!--result:4.64
radix
Converting decimal numbers to different bases(radix)
Usage: number | radix(base)
{{ 8 | radix(2)}}{{ 32586 | radix(16) }}<!--result:10007F4A
sum
Sum up all values within an array
Usage: array | sum(initial-value[optional])
{{ [2,3,5] | sum }}{{ [2,3,5] | sum(10) }}<!--result1020
degrees
Converts radians into degrees
Usage: radians | degrees(round-to-decimal)
,
{{ 0.785398 | degrees(0) }}{{ -1.57 | degrees(3) }}<!--result45-89.954
radians
Converts degrees into radians
Usage: degrees | radians(round-to-decimal)
,
{{ 45 | radians(2) }}{{ 180 | radians(5) }}<!--result0.793.14159
shortFmt
Converts numbers into formatted display
Usage: number | shortFmt(round-to-decimal)
,
{{ 45000 | shortFmt(0) }}{{ 18234822 | shortFmt(1) }}<!--result45 k18.2 m
byteFmt
Converts bytes into formatted display
Usage: number | byteFmt(round-to-decimal)
,
{{ 1998 | byteFmt(2) }}{{ 1339234901 | byteFmt(5) }}<!--result1.95 KB1.24726 GB
kbFmt
Converts kilobytes into formatted display
Usage: number | kbFmt(round-to-decimal)
,
{{ 1024 | kbFmt(0) }}{{ 1049901 | kbFmt(5) }}<!--result1 MB1.00126 GB
Other
bytes
-
Arguments:
{Number} [decimalDigits] - default: 2
-
Examples:
20 | bytes // => 20 byte2000 | bytes // => 1.95 kb2000000 | bytes // => 1.91 MB2000000000 | bytes // => 1.86 GB2000000000000 | bytes // => 1.82 TBChange the number of digits after the decimal point:
2000000000 | // => 1.8626 GB
currency
-
Arguments:
{String} [symbol] - default: '$'
{Number} [decimalDigits] - default: 2
{Object} [options] - default: {}
-
Options:
{String} [thousandsSeparator] - default: ','
{String} [decimalSeparator] - default: '.'
{Boolean} [symbolOnLeft] - default: true
{Boolean} [spaceBetweenAmountAndSymbol] - default: false
{Boolean} [showPlusSign] - default: false
-
Example:
amount | currency // 12345 => $12,345.00Use a different symbol:
amount | // 12345 => £12,345.00Use a different number decimal places:
amount | // 12345 => ₽12,345Use a different thousands separator:
amount | // 12345 => $12.345Use a different decimal separator:
amount | // 12345 => $12,345,00Use symbol on right:
amount | // 12345 => 12,345$Add space between amount and symbol:
amount | // 12345 => $ 12,345Show the plus sign if the value is greater than zero:
amount | // 12345 => +$12,345Use multiple options:
amount | // 12345 => 12,345.00 kr
pluralize
-
Arguments:
{String|Array} single or Array(single, double, triple, ...)
{Object} [options] - default: {}
-
Options:
{Boolean} [includeNumber] - default: false
-
Example:
count count |// 1 => '1 item'// 2 => '2 items'Use an array of words:
count count |// 1 => '1 fry'// 2 => '2 fries'// 3 => '3 fries'Include number to output:
count |// 1 => '1 test'// 2 => '2 tests'
ordinal
-
Arguments:
{Object} [options] - default: {}
-
Options:
{Boolean} [includeNumber] - default: false
-
Example:
date | ordinal// 1 => 'st'// 2 => 'nd'// 3 => 'rd'// 4 => 'th'// 5 => 'th'Include number to output:
date |// 1 => '1st'// 2 => '2nd'
number
-
Arguments:
{String} [format] - default: ''
{Object} [options] - default: {}
-
Options:
{String} [thousandsSeparator] - default: ','
{String} [decimalSeparator] - default: '.'
-
Examples:
123456 | // => 123,456Change the number of digits after the decimal point:
1234567 | // => 12345.6700Add a plus or minus sign to the beginning:
123456 | // => +123456123456 | // => -123456Show number in thousand (K) or in millions (M):
123456 | // => 123K123456 | // => 123 K123456789 | // => 123MUse a different thousands separator:
1234567 | // => 1 234 567Use a different decimal separator:
1234567 | // => 12,345|67
dateFormat
-Converts date to given format
date:
{{ date | dateFormat('YYYY-MM-DD')}}
json
-Converts javascript object to json string
users : user: score: 988790 user: score: 123414 user: rank : 988999 user: score: 987621
{{ users | json}}
Contributing
If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.