Vue Setup Refs

Posted on  by admin

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.

Prerequisites:

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.

The general syntax is given as:. When we make this in parent DOM it may expose as this. 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.

Objective:To learn how to handle focus management using Vue refs.

What is Vue.js?

Generally, it is a read-only attribute and returns an Object. When an element uses ref attribute it automatically creates a link on itself inside this keyword. In other words, when Vue uses refs – say like if it is used for v-for loop, Vue dynamically creates an array of elements and if it is used in a component it refers the component instance.

When we use refs in v-for, Vue automatically collects the DOM elements for iterations purpose and store them in an array.

  1. Let’s see how refs works with simple code by accessing DOM node. Above code explains that when we use ref attribute to input element which is accessed inside-mounted with this .$ ref [“surf”].
  2. Given below are the examples of Vue.js refs:. Showing simple example on HTML element with refs.
  3. Node JS Training Program (3 Courses, 7 Projects)3 Online Courses | 7 Hands-on Projects | 25+ Hours | Verifiable Certificate of Completion | Lifetime Access 4.5 (8,311 ratings).
  4. Related Courses. Vue JS Training (1 Courses, 3 Project)JavaScript Training Program (39 Courses, 23 Projects, 4 Quizzes). Here the function return the Message by referring element.

V-ref on V-for Directive. Reference Access the data Object through List-items. Vue refs on handling conditionals. Here in the above code, we use v-for directive so instead of returning objects, refs of array elements return a list of items.

When we execute the above code in Visual Code, we get the output like this. Using input type. In the above code, we have used a method submit() in which the refs are made to the input and the count value is incremented each time when we input something in the button.

How Vue.js refs work

Note: From all the above discussion, we conclude that ref() is used just for primitives. This article shows how to reference HTML elements – DOM in Vue. All these are done by all the HTML elements properties like child node, attributes. We have also seen how to achieve this various example.

Finally, this refs gets famous after the Vue instance has declared and most importantly they directly manipulate Child nodes. This is a guide to Vue.js refs. Here we discuss the introduction, how refs work in Vue.js? along with examples respectively. You may also have a look at the following articles to learn more –.

tags: The front end of runningVue3Vue. pass ref Function, still can achieve similarthis.$refs Function. Firstsetup In definitionRef variable. Then I willdivRef Variables are mounted on the DOM. Be in this wayonMount When the hook is triggered, the DIM DOM will print out at the console.

in addition ref Dynamic associations can also be implemented, specific implementation can refer to the article《$refs and the Vue 3 Composition API》. pass getCurrentInstance() You can get the Vue instance object. We change the code above the above. Pay attention, usegetCurrentInstance There are some restrictions, you can refer toOfficial description.

How to use $ REFS in Vue3 SETUP

DOM REF usage in Vue 3.0 There is no specific use method in the document in Element-Plus 3.0 document connection https://www.vue3js.cn/docs/zh/guide/composition-api-template-refs.html ..

Limitations of components in Vue 2 If you want to know the combined API, we must first know the limitations of the components in Vue 2. Currently, three restrictions may encounter when using Vue 2: Re.. In this tutorial, we’ll demonstrate how to reference HTML elements in your Vue.js components.

We’ll cover the following in detail:. This Vue refs tutorial is suited for all stages of developers who use Vue — including beginners.

What are refs in Vue.js?

Here are a few prerequisites you should already have before you get started:. Node.js version 10.x or above. Verify your version by running node -v in your terminal/command prompt. npm 6.7 or above. A code editor; I highly recommend VS Code.

Vue.js 3 installed globally on your machine. Vue CLI 3.0 installed on your machine. To do this, uninstall the old CLI version first with npm uninstall -g vue-cli, then install the new one using npm install -g @vue/cli.

Download a Vue starter project. Unzip the downloaded project, navigate into it, and run npm install to keep all the dependencies up to date.

Vue.js is a progressive JavaScript framework created by Evan You and the Vue core team with contributions from more than 230 community members. Vue is used in more than 870,000 projects and has more than 175,000 stars on GitHub. Vue.js is an approachable core library that focuses on the view layer only. It also has a massive ecosystem of supporting libraries that help you easily build responsive web experiences.

Refs are Vue.js instance properties that are used to register or indicate a reference to HTML elements or child elements in the template of your application. If a ref attribute is added to an HTML element in your Vue template, you’ll then be able to reference that element or even a child element in your Vue instance.

You can also access the DOM element directly, too; it is a read-only attribute and returns an object. The ref attribute makes a DOM element selectable by serving as the key in the parent $ref attribute. Putting a ref attribute in an input element, for instance, will expose the parent DOM node as this.$refs.input, or you can say this.refs["input"]. For a quick visual guide on referencing with $refs in Vue.js, check out this video tutorial:.

You can manipulate a DOM element by defining methods on the element’s reference. For example, you could focus to an input element with this:. In this way, refs can be used just like the document.querySelector('.element') in JavaScript or the $('.element') in jQuery.

The $refs can be accessed both inside the Vue.js instance and outside of it. However, they are not data properties, so they are not reactive. On template inspection in your browser, they do not show up at all because it is not an HTML attribute; it is only a Vue template attribute.

If you followed this post from the start, you should have downloaded the starter project and opened it up on VS Code. Open the components folder and copy this into the test.vue file:.

How do you use refs in Vue.js?

Now run this in your development server with the command:. You will see that the user interface displays a simple counter that gets updated on click, but when you open your developer tools in the browser, you will notice that it logs undefined. It is very important that you get the syntax right because this means that Vue does not see this as an error, but it is.

According to what we already know about Vue refs, they return an object, but judging by the undefined response, something is wrong. Copy the code below into the test.vue file:. When you run this and inspect it, you will notice that it now returns an object:.

A quick look at the code block will reveal the correct syntax: inside the template it is called ref, but when we refer to it in the Vue instance, it is called $refs. This is very important to note so as to not get undefined returned. You can access every single possible property of the referenced element, including the element as it is in the template.

  1. Let’s try logging some of the properties that might be of interest to us. Your test.vue file should be:. The application on your browser should look like this:.
  2. To display the HTML element as it is in the DOM, go into the submit method and change the methods code to the below:. The input here is the reference name you earlier created inside the element (ref="input").
  3. It can be any name of your choice. To display the HTML element input value — the string that was typed into the text box in the user interface — go into the submit method and change the code to:.
  4. This displays exactly the string you type in, which shows a similarity to query selection which vanilla JavaScript and jQuery can achieve too.
  5. The webpage in which the element can be found is also one of the many things that can be displayed with the Vue ref.
  6. Go into the submit method and change the code to this:. There are many other things you can both access and log with the ref just from information on the object returned.
  7. Vue.js refs can be also used inside elements that output more than one element in the DOM, like conditional statements where v-for directives are used.
  8. Instead of objects, refs return an array of the items when called. To illustrate this, create a simple list like this:.
  9. When you run it again in the development server, it will look like this:. You can find the full code of this tutorial on GitHub here.
  10. Debugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session.

If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. LogRocket is like a DVR for web apps, recording literally everything that happens on your site.

Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred.

The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.

Modernize how you debug your Vue apps – Start monitoring for free. This post has exposed you to referencing HTML elements in your DOM in Vue.js. You can now both access and log these element by all the elements properties such as value, child node, data attributes, and even the base URL that houses it.

You have also been introduced to ways you can achieve this.

It is important to note that refs get populated after the Vue instance has initialized and the component has been rendered, so using refs in computed properties is discouraged because it has the ability to directly manipulate child nodes.

Introduction to Vue.js refs

There's one more place we need to consider focus management: when a user deletes a to-do. When clicking the "Edit" Button, it makes sense to move focus to the edit name text box, and back to the "Edit" button when canceling or saving from the edit screen.

However, unlike with the edit form, we don't have a clear location for focus to move to when an element is deleted. We also need a way to provide assistive technology users with information that confirms that an element was deleted.

We're already tracking the number of elements in our list heading — the

in App.vue — and it's associated with our list of to-do items. This makes it a reasonable place to move focus to when we delete a node.

First, we need to add a ref to our list heading. We also need to add a tabindex="-1" to it — this makes the element programmatically focusable (i.e. it can be focused via JavaScript), when by default it is not.

Inside App.vue, update your

as follows:

Note:tabindex is a really powerful tool for handling certain accessibility problems. However, it should be used with caution. Over-using tabindex="-1" can cause problems for all sorts of users, so only use it exactly where you need to. You should also almost never use tabindex > = 0, as it can cause problems for users since it can make the DOM flow and the tab-order mismatch, and/or add non-interactive elements to the tab order. This can be confusing to users, especially those using screen readers and other assistive technology.

Now that we have a ref and have let browsers know that we can programmatically focus the

, we need to set focus on it. At the end of deleteToDo(), use the listSummary ref to set focus on the

. Since the

is always rendered in the app, you do not need to worry about using $nextTick of lifecycle methods to handle focusing it.

Now, when you delete an item from your list, focus should be moved up to the list heading. This should provide a reasonable focus experience for all of our users.

Getting DOM elements in Vue.js

So that's it for focus management, and for our app! Congratulations for working your way through all our Vue tutorials. In the next article we'll round things off with some further resources to take your Vue learning further.

Note: If you need to check your code against our version, you can find a finished version of the sample Vue app code in our todo-vue repository. For a running live version, see https://mdn.github.io/todo-vue/dist/.

Conclusion

  • React
  • Ember
  • Vue
  • Svelte
  • Angular