1---
2category: Array
3---
4 
5# useArrayFilter
6 
7Reactive `Array.filter`
8 
9## Usage
10 
11### Use with array of multiple refs
12 
13```ts
14import { useArrayFilter } from '@vueuse/core'
15 
16const item1 = ref(0)
17const item2 = ref(2)
18const item3 = ref(4)
19const item4 = ref(6)
20const item5 = ref(8)
21const list = [item1, item2, item3, item4, item5]
22const result = useArrayFilter(list, i => i % 2 === 0)
23// result.value: [0, 2, 4, 6, 8]
24item2.value = 1
25// result.value: [0, 4, 6, 8]
26```
27 
28### Use with reactive array
29 
30```ts
31import { useArrayFilter } from '@vueuse/core'
32 
33const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
34const result = useArrayFilter(list, i => i % 2 === 0)
35// result.value: [0, 2, 4, 6, 8]
36list.value.shift()
37// result.value: [2, 4, 6, 8]
38```
39 
40## Type Declarations
41 
42```ts
43export type UseArrayFilterReturn<T = any> = ComputedRef<T[]>
44/**
45 * Reactive `Array.filter`
46 *
47 * @see https://vueuse.org/useArrayFilter
48 * @param list - the array was called upon.
49 * @param fn - a function that is called for every element of the given `list`. Each time `fn` executes, the returned value is added to the new array.
50 *
51 * @returns a shallow copy of a portion of the given array, filtered down to just the elements from the given array that pass the test implemented by the provided function. If no elements pass the test, an empty array will be returned.
52 *
53 * @__NO_SIDE_EFFECTS__
54 */
55export declare function useArrayFilter<T, S extends T>(
56  list: MaybeRefOrGetter<MaybeRefOrGetter<T>[]>,
57  fn: (element: T, index: number, array: T[]) => element is S,
58): UseArrayFilterReturn<S>
59export declare function useArrayFilter<T>(
60  list: MaybeRefOrGetter<MaybeRefOrGetter<T>[]>,
61  fn: (element: T, index: number, array: T[]) => unknown,
62): UseArrayFilterReturn<T>
63```
64