Vue 3 Template Ref

Posted on  by admin

Modified4 months ago. This is a normal way to define a ref in vue3, but in JavaScript way.And if I'm using TypeScript, I will need to define a type for value element, right?

How do I do to ensure the correct type for value element? 3030 bronze badges.

Some uses for Vue template refs

48311 gold badge55 silver badges1313 bronze badges. 55 silver badges1313 bronze badges. Well, that would depend on whether or not you need it typed and to provide member information (public properties, methods, etc).

  • If you do, then yes you need to define a type for it; otherwise, you don't have to, and can simply access the unwrapped reference with .value which leaves it as type any (I bet you figured out this one).

But if you have to, you need to tell the compiler what it is or what it's going to be assigned on.

To do that, you'll want to use the third overload of ref (with no argument) and explicitly set the generic type to the desired type—in your case, you want HTMLDivElement (or simply HTMLElement if you don't care about the specific members it has to offer).

In JavaScript, you don't have type checking, so passing null on the ref function is as good as not passing anything (which is especially okay for template refs)*; it could even come across as being misleading in a sense that the unwrapped value actually resolves to something else butnull.

Wrapping it up

* When using the Composition API, the concept of "reactive refs" and "template refs" are unified.

And the reason we're accessing this particular type of ref on the mounted hook is because the DOM element will be assigned to it after initial render. 22 gold badges2323 silver badges4141 bronze badges.

Do you want to learn more about advanced Vue.js techniques?

4141 bronze badges. The line isn't correct:. The el is not an HTMLDivElement. Instead, it's a proxy to the element. The $el of that proxy is the actual HTMLDivElement.

Though I'm not sure if I get it right. In a component, I managed to type it as follow:. 22 gold badges1212 silver badges1010 bronze badges.

Template Refs in the Options API

1010 bronze badges. Vue Template Refs give our Javascript code a reference to easily access the template.

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.

It joins the concept of reactive refs and template refs giving us just one syntax in our Javascript for both situations.

Dynamic $refs in v-for

In this tutorial, we’ll be learning all about template refs: how to use them in both the Options API and Composition API, some advanced refs techniques, as well as look at good times to use this feature.

Let’s jump right in. 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.