Vue Get Dom Element

Posted on  by admin

hi everyody,it is easy to get a DOM element from inside a Vue instance (this.$el)but the opposite way seems tricky….

In order to get easy reference from each DOM element to it’s vue instance, i have implemented the following function which creates a refference array (containing all vue nodes) and added a data attribute to the actual DOM element pointing to the index of it’s vue instance in the array.

function updateRef(vueNode, refArray) {vueNode.$el.dataset.vueref = refArray.length;refArray.push(vueNode);vueNode.$children.forEach(function(child) {updateRef(child, refArray);})return refArray;}var elRefs = [];updateRef(this, elRefs);.

  • this way i can get the vue node like this:vueNode = elRefs[el.dataset.vueref];. is there any “native” vue way of accomplishing the same result?(i have tried using $refs but properly registering all elements and than searching for the right object within the $refs array proved to be a nightmare…).
  • tags: Vue.jsVue.js.
  • Vue.js Although it is a data driver page, sometimes we have to get some operations in DOM objects.
  • Vue's different versions of the DOM object are different.
  • In the Vue.js version 1.0, Bind v-el, then get this.els.xxx to get. Vue.js version 2.0. We bind ref = "xxx" to the element, then get through this. $ Refs.xxx or this.refs ['xxx'].
  • Take 2.0 as an example:.
  • In Vue, the DOM needs to be cautious, especially when adding or deleting DOM, especially when MOUNTED () and created (), the DOM object has not been generated, and in the callback function of this.nextTick ().

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvue-component or ask your own question.

Well, it's sauce ~~. Node types: element nodes, text nodes, attribute nodes. Element node method Document.getElementById(); //Get the node by id, id is unique Document.getElementsByTagName(); //Get ..

Get the DOM elements in the component

<[email protected]="show">Click to get the attributes of the el..

Bonus feature

It’s time to take a closer look at a few more special Vue instance properties and methods, with the first one being the $refs property.

But before diving into the JavaScript part of things, let’s start by taking a look at the template. By adding a ref attribute to any element within the template, we can refer to these elements on our Vue instance.

Install

More specifically, we can access the DOM elements. So let’s try it out on the button that I have added in advance.

The button already has a click event handler which doesn’t do anything yet. Note that the ref attribute is not a standard HTML attribute, so it is only used by Vue.

In fact, it won’t even be part of the DOM, so if you inspect the rendered HTML, you won’t see a sign of it.

Plugin

And, since we didn’t prefix it with a colon, it is not a directive either. We can now reference this button by using the name myButton.

We can do this by using the $refs property on our Vue instance. Let’s log this to the console and see what it looks like. So if I open up the console, we can see that this property is a JavaScript object holding references to all of the elements on which we have added a ref attribute.

Notice that the key names within this object match the names that we specify within the ref attribute, and the values are the DOM elements.

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

In this case, we can see that the key is myButton and that the value is a native button element which has nothing to do with Vue.js. Therefore we can simply access the DOM element by accessing the name of our reference as a property on the $refs object.

Let’s see that in action. As an example, I will change the text of the button when clicking it.

Update for vue 2

Clicking the button now, will change its text to “Hello World!”. Of course we could also have accomplished this with vanilla JavaScript by using a query selector to get access to the DOM element, but using the ref attribute is much cleaner and is the Vue way of doing it.

It’s also safer because you won’t be relying on classes and IDs, so the chances of you breaking your code as a result of changing the markup or CSS styles, are lower. One of the main purposes of a JavaScript framework like Vue is for developers to not have to deal with the DOM.

Therefore you should avoid doing what I just showed you unless you really need to.

There is a potential problem that you should be aware of, which I will show you now.

Let’s first add a ref attribute to our h1 element. Since I have already assigned the Vue instance to a variable, I can just go ahead and use it. What I want to do, is to change the text of the element. Since it will initially contain the value of the message data property, I will just apply a timeout so that we can see what happens.

Use

Let’s run it and see that the text changes after two seconds. Next, I will change the message data property two seconds later.

Let’s run the code again and see what happens.

Get a DOM element in Vue

As you can see, the change that we made to the DOM is overwritten when updating the data property. The reason for this, is that when accessing the DOM elements and manipulating them directly, we are essentially skipping the virtual DOM as we discussed in a previous post.

So Vue is still controlling the h1 element because it holds a copy of the template, and when Vue reacts to changes in the data property, it updates the virtual DOM and thereafter the DOM itself.

How to initiate a third-part-library

Therefore you should be careful with applying changes to the DOM directly like this, as any changes you apply may be overwritten if you are not careful.

While you should be cautious with changing the DOM when using references, it is safer to do read-only operations such as reading values from the DOM.

Solution 2 (not recommended): Using non-documented @VnodeMounted

As the last thing, I want to show you how you can also use the ref attribute on elements with the v-for directive. I will just add an unordered list consisting of the numbers from one to ten, which I will output using the v-for directive.

We have already added a line that logs the $refs property to the console when clicking the button, so let’s open up the console and see what it looks like.

Intelligent Recommendation

A numbers property has been added to the object as we would expect, but notice the type of the value. Instead of being the DOM element as we saw before, it’s actually an array – an array of DOM elements. When using the ref attribute together with the v-for directive, Vue collects the DOM elements for all of the iterations of the loop and places them within an array.

In this case, this gives us an array of ten li DOM elements, because our loop iterates ten times.

Each of these elements can then be used exactly as we saw before.

Solution 1 (recommended): Using template refs

And that’s about all you need to know about the $refs property. Here is what you will learn:. How to build advanced Vue.js applications (including SPA). How Vue.js works under the hood. Communicating with services through HTTP.

Managing state of large applications with Vuex. Modified4 months ago. How can I find the vue.js component corresponding to a DOM element? Is there a vue method equivalent to the jQuery.

236236 bronze badges. 1,59111 gold badge1212 silver badges1717 bronze badges. 1212 silver badges1717 bronze badges. 2626 gold badges318318 silver badges292292 bronze badges4.

292292 bronze badges. The proper way to do with would be to use the v-el directive to give it a reference.

In Vue 3 + Composition API there is no $el alternative provided.

Then you can do this.$$[reference]. In Vue 2 refs are used for both elements and components: http://vuejs.org/guide/migration.html#v-el-and-v-ref-replaced. 259259 bronze badges. 9,47733 gold badges4242 silver badges6767 bronze badges.

4242 silver badges6767 bronze badges. In Vue.js 2 Inside a Vue Instance or Component:. Use this.$el to get the HTMLElement the instance/component was mounted to. From an HTMLElement:. Use .__vue__ from the HTMLElementE.g. var vueInstance = document.getElementById('app').__vue__;.