How to get DOM element of current Vue component?

javascript jquery dom components vue.js
Kamil Kiełczewski picture Kamil Kiełczewski · Apr 11, 2016 · Viewed 26k times · Source

When I'm inside some method in vue commponent and want to use some dom manipulation (by jquery) I need to get DOM element coresponnding to my component (especially in case when I have many instances of my component on page - I need to 'work' separately on each of them - so I cannot detect DOM element using only jquery selector without tricks...)

Answer

Kamil Kiełczewski picture Kamil Kiełczewski · Apr 11, 2016

Just by this (in any method in "methods"):

let domElement = this.$el;

:)

But remember this is valid as long as your component is not a Fragment Instance i.e. it has a single root HTML tag

Related questions

How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: jQuery seems to hide the td elements when I select it by class but not by element's name. For example, why does: $(".bold").hide(); // selecting by class works $("tcol1").hide(); // …

Read More
How do I set/unset a cookie with jQuery?

How do I set and unset a cookie using jQuery, for example create a cookie named test and set the value to 1?

Read More