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.
Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/vue-3-display-a-list-of-items-with-v-for). The app component template contains some standard html for a heading and table, and inside the table the tr tag uses the v-for Vue directive to loop over the users array and render a table row for each user that includes the user name, email and role.
The app component contains the hardcoded users array that is rendered with the v-for directive in the template.
The users array is created and returned by the Vue 3 setup() method which makes it available to the template. The setup() method runs before the component is created and serves as the entry point for Vue 3 components that are created with the new Composition API.
For more info on the Vue 3 Composition API see https://v3.vuejs.org/guide/composition-api-introduction.html.
If you have an array of objects that don't have a unique property (e.g. id) that you can use for the :key attribute, it's possible to use the item index which is provided by the v-for directive. This is how the above v-for would look using the item index instead of the id as the key prop:.
For example, if we needed quick access to a component or HTML element, template refs is the perfect solution.
In Vue 3, the Composition API gives us another way to use template refs.
For our example, we’re going with the standard use case of focusing an input when a user loads a page.
This is useful because it can avoid people having to click in a text input and saves extra time.
An example of this functionality is on Google’s home page.
But first, we need to create a text input and give it a ref.
Regardless if we’re using the Options API or Composition API, we declare refs in our template the same way. On any element or component, we have to specify an attribute called ref and pass it a unique reference ID as a String.
That’s it for our template, now let’s see how to access it in our script.
Vue stores all template refs under the property this.$refs. An important note here is that in order for our refs to be accessible, our component must already have rendered on the screen.
So let’s listen for that lifecycle hook, access our ref, and focus it.
Now, if we reload our browser, we’ll see that our browser is automatically focused and we can type without having to click it first.
Now time for the Composition API. Just to reiterate, the Composition API merges the concept of reactive data via ref with the concept of template refs.
So all we have to do is create a ref with the same name as the ref attribute in our template.The ref has a default value of null and will actually be the value of the input once our component is mounted.
But since we’re working in the Composition API, we have to import this hook and use it inside the setup function.
Inside, we can easily call input.value.focus().
And if we look back at our app, we have the same functionality as we did the Options API. Next up, let’s take a look at some interesting interactions between v-for and other interactions in Vue.
I’m going to expanding on examples from the Vue docs themselves. This interaction is useful whenever we’re rendering a list with a v-for loop and we want to create a ref for each element.
Inside of our script, we can create a ref that contains an empty array.
And then, in the element we are creating, we can programmatically add elements to our array based on the index in the v-for loop.
This is the simplest way to get a list of elements inside a template ref.