Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Only last element is accessible using ref in template-based functional components inside v-for loops #10171

Open
Sumolari opened this issue Jun 20, 2019 · 4 comments

Comments

@Sumolari
Copy link

Version

2.6.10

Reproduction link

https://codesandbox.io/s/vue-template-bqe44?fontsize=14

Steps to reproduce

  1. Create a functional component
  2. Use that functional component inside a v-for
  3. Add a ref binding to the functional component to be able to get the DOM element in parent component

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

@KaelWD
Copy link
Contributor

KaelWD commented Jun 21, 2019

You need to pass down data.refInFor too, idk if that's possible without using render functions.

@posva 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
@posva
Copy link
Member

posva commented 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

@Sumolari
Copy link
Author

Sumolari commented Jul 3, 2019

@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.

@all43
Copy link

all43 commented Nov 11, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants