Skip to content

useArrayFilter ​

Category
Export Size
132 B
Last Changed
5 months ago

Reactive Array.filter

Usage ​

Use with array of multiple refs ​

js
import { useArrayFilter } from '@vueuse/core'

const item1 = ref(0)
const item2 = ref(2)
const item3 = ref(4)
const item4 = ref(6)
const item5 = ref(8)
const list = [item1, item2, item3, item4, item5]
const result = useArrayFilter(list, i => i % 2 === 0)
// result.value: [0, 2, 4, 6, 8]
item2.value = 1
// result.value: [0, 4, 6, 8]

Use with reactive array ​

js
import { useArrayFilter } from '@vueuse/core'

const list = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
const result = useArrayFilter(list, i => i % 2 === 0)
// result.value: [0, 2, 4, 6, 8]
list.value.shift()
// result.value: [2, 4, 6, 8]

Type Declarations ​

typescript
/**
 * Reactive `Array.filter`
 *
 * @see https://vueuse.org/useArrayFilter
 * @param list - the array was called upon.
 * @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.
 *
 * @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.
 */
export declare function useArrayFilter<T>(
  list: MaybeRefOrGetter<MaybeRefOrGetter<T>[]>,
  fn: (element: T, index: number, array: T[]) => boolean,
): ComputedRef<T[]>

Source ​

Source • Docs

Contributors ​

Anthony Fu
Levi (Nguyá»…n LÆ°Æ¡ng Huy)
Levi (Nguyá»…n LÆ°Æ¡ng Huy)

Changelog ​

v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.1.1 on 8/23/2022
0fdbb - fix(shared): resolve internal circular reference
v8.9.3 on 7/14/2022
50e35 - feat: new function (#1905)

Released under the MIT License.