Scaling UpLesson 33Free preview

Vue Template Refs

This lesson is part of Vue · All levels

Summary

Template refs provide a way to access DOM elements or component instances directly from the Vue logic. With the Composition API, you create a ref with the same name exactly as the ref attribute in the template, and then Vue fills it with that element after rendering. Access to the DOM should be done after the component is installed, for example in onMounted.

Key points

Template refs access the DOM element or component instance directly.
In the Composition API, declare a ref with the same name as the ref attribute.
The ref value is filled after the component is rendered.
DOM access should be done on-mounted, not directly in the setup.
The Options API provides this.$refs for similar access.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.