Skip to content

BUG | useIntersectionObserver | useTemplateRef of array type cannot be passed as argument #4712

@zaalbarxx

Description

@zaalbarxx

Describe the bug

Given

<template>
<div v-for="event in events" ref="$events"></div>
</template>

<script setup lang="ts">
...
const $events = useTemplateRef('$events');
useIntersectionObserver($events, () => {});
</script>

Image

where $events is a ref with array of elements and ref="$events" bound to element which has v-for it will mark template ref's value as Readonly<ShallowRef<HTMLDivElement[] | null>> which is incompatible with MaybeComputedElementRef | MaybeRefOrGetter<MaybeElement[]> | MaybeComputedElementRef[].

Of course it can be mitigated by using computed(() => $events.value ?? []) and it will work fine, but it would propably be possible to improve the input types for the composable itself (did not have time yet to look closer into it).

For reproduction type vue-tsc -p tsconfig.app.json in terminal.

Reproduction

https://stackblitz.com/edit/vitejs-vite-cadjhx57?file=src%2Fviews%2FAbout.vue,src%2Fcomponents%2FCounter.vue,src%2Fcomponents%2FHeader.vue,src%2Fviews%2FHome.vue,src%2FApp.vue

System Info

Windows 11
Vue 3.5.13
VueUse 13.1.0

Used Package Manager

pnpm

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinghas workaroundHas workaround to avoid this issue

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions