-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Open
Labels
bugSomething isn't workingSomething isn't workinghas workaroundHas workaround to avoid this issueHas workaround to avoid this issue
Description
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>
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
System Info
Windows 11
Vue 3.5.13
VueUse 13.1.0
Used Package Manager
pnpm
Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion.
- The provided reproduction is a minimal reproducible example of the bug.
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't workinghas workaroundHas workaround to avoid this issueHas workaround to avoid this issue