Vuejs Ref Element

Posted on  by admin

Modified11 months ago. How can I get reference to the element that fired the method in Vue.js?I have HTML like this:. And in my Vue.js viewmodel I have a method:. I know that it's possible to get the element from event (v-on:click), but this is not an event, it's a simple method returning CSS class for the element according to few conditions of the viewmodel.

  • It should be computable as well, but the problem is the same.

77 gold badges2525 silver badges3232 bronze badges.

3232 bronze badges. You can get the reference to your element in three ways.

with Method Event Handlers (doc). with Inline Handlers (doc).

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

with Refs (doc). Maybe you could use ref? And use it like this:. See documentation here: https://vuejs.org/v2/api/#ref. Daniel DiekmeierDaniel Diekmeier. What about using the ref pattern. Put ref="someName" in your DOM element, and access it in your method with this.$refs["someName"] (you can pass 'someName' as parameter to your method). Note that's not a very good pattern except if for some reason you really need the DOM element.

Otherwise just pass a relevant parameter to your method.

Conclusion

It's not a good method mainly because it has a major drawback: there is no $refs the first time the vue is rendered (because the element is not present yet). So you should force the vue to render twice.

Not the answer you're looking for? Browse other questions tagged vue.js or ask your own question.

If you have multiple elements inside a v-for loop, then this.$refs["someName"] becomes an array. You can get it to work with some adaptation, here is an example:. 22 gold badges2727 silver badges3737 bronze badges. 3737 bronze badges. You can get the reference from DOM event object. "event.currentTarget" is the property that references the element where the event listener(vuejs method) assigned. This is standard DOM specification, but you can also use this property in Vuejs.

How do you use refs in Vue.js?

Heesoo LeeHeesoo Lee. A straightforward solution is to pass a reference to the element in the method to be called. Here's what worked for me (a pretty basic example to help understand):.

This seem to work for me, using ref (if element is nested another element). or $el if targeted element is the outermost. 11 gold badge2222 silver badges1111 bronze badges. 1111 bronze badges. You can use refs as mentioned in other answers here. Remember, refs cannot apply to computed objects.

So be careful when using refs. 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.

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.

How Vue.js refs work

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.

Wrapping it up

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.

What are refs in Vue.js?

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:. Now run this in your development server with the command:.

What is Vue.js?

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.

Looking for a Vue.js job?

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.
  • 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:.

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").