Vuejs Refs

Posted on  by admin
The $refs property in Vue is used to reference DOM elements in the Vue instance's templates.

A common use case for $refs is focusing on a DOM element when a certain event happens. The autofocus property works on page loads. But what if you want to give focus back to the username input if login failed? If you give the username input a ref attribute in your template, you can then accessthe username input using this.$refs.username as shown below.


You can then callthe built-in Element#focus() function to give focus to the username input. When you use ref with the v-for directive,Vue gives you a native JavaScript array of elements, not just a single element.

How Vue.js refs work

For example, suppose you have a list of tags, and you want usersto be able to navigate between inputs using the up and down arrow keys.You can access the individual elements using $refs and callfocus() whenever the user presses up or down:.
Vue School has some of our favorite Vue video courses.
Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase.

With v-for

refs in Vue.js is defined as the referencing to make the DOM element selectable by making the key in the parent $refs and considered to be a Vue Instance property. It tells how to directly access the child functions on parent elements using this attribute and they are the most reliable attributes to reach into our templates and grab an element easily meanwhile accessing the data for that element.

When a Simple DOM element is used the reference is done with that element. This Special attribute has the beauty to directly access the DOM element to fetch some data.

What is Vue.js?

The general syntax is given as:. When we make this in parent DOM it may expose as this.

Introduction to Vue.js refs

refs is not a standard HTML attributes and it is used only in Vue. When a ref attribute is added to an HTML element through Vue template, then we shall reference that element or in other case taking a child element in the Vue Instance.