useArrayDifference

v0.0.15testeddemo

Reactive difference of two arrays. Returns items in `list` that are not in `values` (asymmetric), or items in exactly one array (symmetric). Both arrays may be reactive (refs or getters).

Source Tests

Examples

const list = ref([1, 2, 3, 4, 5]);
const values = ref([2, 4]);
const diff = useArrayDifference(list, values); // [1, 3, 5]

const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }]);
const values = ref([{ id: 2 }]);
const diff = useArrayDifference(list, values, 'id'); // [{ id: 1 }, { id: 3 }]

const a = ref([1, 2, 3]);
const b = ref([2, 3, 4]);
const symmetric = useArrayDifference(a, b, { symmetric: true }); // [1, 4]

Demo

Loading demo…

Signatures

export function useArrayDifference<T>(
  list: MaybeRefOrGetter<T[]>,
  values: MaybeRefOrGetter<T[]>,
  comparator?: UseArrayDifferenceComparatorFn<T>,
  options?: UseArrayDifferenceOptions<T>,
): UseArrayDifferenceReturn<T>;

export function useArrayDifference<T>(
  list: MaybeRefOrGetter<T[]>,
  values: MaybeRefOrGetter<T[]>,
  comparator?: keyof T,
  options?: UseArrayDifferenceOptions<T>,
): UseArrayDifferenceReturn<T>;

export function useArrayDifference<T>(
  list: MaybeRefOrGetter<T[]>,
  values: MaybeRefOrGetter<T[]>,
  options?: UseArrayDifferenceOptions<T>,
): UseArrayDifferenceReturn<T>;

Type Parameters

T

Parameters

Parameter	Type	Default	Description
`list`	`MaybeRefOrGetter<T[]>`	—	The source array
`values`	`MaybeRefOrGetter<T[]>`	—	The array of values to subtract from `list`
`comparator`?	`UseArrayDifferenceComparatorFn<T> \| keyof T \| UseArrayDifferenceOptions<T> \| undefined`	—	A comparator function, a key of `T` to compare by, or an options object with `comparator`/`symmetric`
`options`?	`UseArrayDifferenceOptions<T> \| undefined`	—	A comparator function, a key of `T` to compare by, or an options object with `comparator`/`symmetric`

Returns

UseArrayDifferenceReturn<T>A computed array of the difference