Template ref[] on v-for is not reactive / cannot be watched #6522
sxgrant
started this conversation in
General Discussions
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have a feature I'm working on where I want to trigger a scroll behaviour to a point specific to an element within a v-for.
To do so, I added a
ref([])
that I apply as a template ref to get a handle on the elements generated by the v-for, and then read their positions within the DOM to measure where to scroll to. However, I wasn't able to find a way towatch
that template ref array or get any reactive activity working for it at all.I can see that the ref array is growing as the v-for grows, but the same process I can use to watch other ref arrays does not work for the template ref array.
In the end, I worked around the problem by not relying on the reactivity and reading the DOM "just in time" when I need it, but I'd love to know what I'm doing wrong or whether this is possible.
This stack blitz shows the issue in a simple way:
https://stackblitz.com/edit/github-gkv3kc?file=app.vue
(It uses Nuxt 3, because that's what I'm currently used to - I don't think that's relevant to the behaviour)
In writing up that StackBlitz, I'm now noticing that I can get the moustache braces to reactively update as the template ref array grows, however it's one update behind.
Beta Was this translation helpful? Give feedback.
All reactions