Skip to content

'Missing ref owner context' error when using dynamic ref that isn't a string #8230

@marcovdb

Description

@marcovdb

Vue version

3.2.47

Link to minimal reproduction

https://play.vuejs.org/#eNp9UdtKxDAQ/ZUhL6vQNroKQqiyivgTxoe6mdW4zYVcVqX035227lJXEUIyM2dmzuGkY7feV7uMTLA6roP26UZa/PAuJFC4aXKboJMWQDWpOTmdYoCAKQe7zwASxnRPHQIeO9BKwPlZQfO0UcDiwblFX8AELGfAXRMW/dO0ox8euujU/KCEkoTGt01CygDq3MKu3LhwLZkmBLQ9cEsGYouf30illWTjDE21GkTAzR8QQEe6huIoCvpRB43wVk+MPLcU1PyggxVMm8Gg0jS+eovOknmjE7R+BKJkYu+NZOTukEv2mpKPgvNs/falWjvDV4TxkG3SBkvlzOqiWlaXV1zpmOb1CqMpn4N7jxiIUbJitpxTcYehDGgVBgz/kh31/iA8wn6R7n+I9V8Ad7uv

Steps to reproduce

None. You can observe the issue going away when the ID's in testData are converted to a string.

What is expected?

I would expect Vue to either convert the value it receives to a string if necessary, or throw a more useful error message.

What is actually happening?

Error: "Missing ref owner context. ref cannot be used on hoisted vnodes. A vnode with ref must be created inside the render function."

System Info

No response

Any additional comments?

I ran into this weird and very specific issue the other day. Basically it involves using the Options API and iterating through an array of objects using v-for, and using one of the object properties as a dynamic ref. When this property is not a string but a number, there's a pretty cryptic error message that took me a lot of trial and error to figure out.

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions