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.
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.
In my previous post, I implemented my first Vue3 component. I implementend a very simple web app (roll the dice) where I had a “div” where to show the result and a button to trigger the roll and generate a random number from 1 to 6.
The “dice” property was an integer, initialized with 0.