❯
fn

useArrayDifference

v0.0.14testeddemo

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

ts
const list = ref([1, 2, 3, 4, 5]);
const values = ref([2, 4]);
const diff = useArrayDifference(list, values); // [1, 3, 5]
ts
const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }]);
const values = ref([{ id: 2 }]);
const diff = useArrayDifference(list, values, 'id'); // [{ id: 1 }, { id: 3 }]
ts
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

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

Type Parameters

T

Parameters

ParameterTypeDescription
listMaybeRefOrGetter<T[]>The source array
valuesMaybeRefOrGetter<T[]>The array of values to subtract from list
comparator?UseArrayDifferenceComparatorFn<T> | keyof T | UseArrayDifferenceOptions<T>A comparator function, a key of T to compare by, or an options object with comparator/symmetric
options?UseArrayDifferenceOptions<T>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