If you’re used to working with Vue 2 $refs and switch to the Vue 3 Composition API, you might wonder how to use $refs inside the new setup() method.
In this article, we find out how to use the new ref() function as a replacement for static and dynamic HTML element references.
When using the Vue 3 Composition API via the setup() method, we don’t have access to this.$refs, rather, we can use the new ref() function for the same result.
You might wonder how this can work with dynamic references. Luckily after a short chat with Carlos Rodrigues, I knew the answer (the information is also in the official API documentation, but I somehow missed it).
Above you can see the example für dynamic Vue Composition API $refs from the official documentation.
Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture. Although at first, I didn’t like the new $refs API very much, it gets the job done.
I think it’s only a matter of time until we get used to the new way of doing things with the Composition API.