You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You need to pass down data.refInFor too, idk if that's possible without using render functions.
posva
changed the title
Only last element is accessible using ref in functional components inside v-for loops
Only last element is accessible using ref in template-based functional components inside v-for loops
Jun 22, 2019
Not sure what is the best way to handle this because the information about being in a v-for should be passed from the parent in the context and then passed down somehow to the div, maybe that last part should be picked up by vue-loader
@KaelWD Doesn't look like ref-in-for can be passed down in a template-based component.
@posva Makes sense to me that vue-loader is the one responsible of passing that info. However, shouldn't Vue itself warn when some ref is being overwritten by a different one? Looks like an unexpected behaviour even though it's the intended one.
Just for the record, the solution I ended up implementing is just wrapping those template-based functional components in a div and having only one ref for that div. It's not the ideal solution but it's the easiest way I've found.
The same issue with regular elements, like input if it has v-model attached.
Replacing v-model :value and @input could be used as workaround in such case.
This behaviour should be changed, or at least mentioned in the documentation.
Version
2.6.10
Reproduction link
https://codesandbox.io/s/vue-template-bqe44?fontsize=14
Steps to reproduce
What is expected?
The ref in parent component is an array of DOM elements, like it is an array of vNodes when applying this steps to a non-functional component
What is actually happening?
Only the last DOM element of the v-for is bound to the ref. It's also just an element and not an array
There's no warning about overriding previously existing ref
The text was updated successfully, but these errors were encountered: