Vue3 Ref Value Undefined

Posted on  by admin
You block advertising 😢Would you like to buy me a ☕️ instead?

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).
Ilyas karimIlyas karim
  1. Although at first, I didn’t like the new $refs API very much, it gets the job done.

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

To make it reactive, I used “ref()” function to initialize it.

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvue-componentvuejs3 or ask your own question.