How to get the component that rendered a dom element with Vue.js

How to get the component that rendered a dom element with Vue.js ?

For example, suppose you want to retrieve which component "owns" a dom element that the user has selected, how would you do ? (it seems to be implemented in the dev tools, but I can't find a way neither in the documentation, neither on SO)

(I mean, given the DOM element, I know how to retrieve what element is selected)

DISCLAIMER : This may not be the right solution for common use cases. Always prefer handling event & co. in the root component using direct sub-component reference if you can


I do not know if this is safe or officially supported, but assuming you're trying to access the component from some external-to-Vue code, this will return the VueComponent object for a given DOM element (substitute your own DOM selector as needed):

document.getElementById('foo').__vue__

If used on the app's root element, it will instead return the Vue constructor object.

(This appears to work in both Vue 1.x and 2.x.)

Render Functions & JSX, This object also allows you to bind normal HTML attributes as Component props props: { myProp: 'bar' }, // DOM You'll have to manually check the // keyCode in the handler instead. on: { click: this. updated() should be what you're looking for: Called after a data change causes the virtual DOM to be re-rendered and patched. The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here.


This is possibly not the most elegant solution, but you can use mixins to achieve this:

var elemOwner = {
  mounted: function() {
    this.$el.setAttribute("isVueComponent", this.$options.name);
  }
};

As long as you set the mixin to the components you need it in, when you click an element you can test the attributes to see if there's a component name in there.

See this codepen for a fuller example: https://codepen.io/huntleth/pen/EpEWjJ

Clicking the smaller blue square will return the component name of the component that rendered it.

EDIT - It should be noted though that this obviously would only work if the element is actually inside that components root element. I think that would be the case for almost all uses.

Handling Edge Cases, Note however, that they all have disadvantages or situations where they For example, in abstract components that interact with JavaScript APIs instead of rendering HTML, like Accessing Child Component Instances & Child Elements. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at various ways to render items conditionally on the screen with Vue.js by using the v-show directive. Also, we’ll look at the performance implications of combining v-if and v-for is various ways.


Getting this.$parent refers to the parent of a component.

Accessing the virtual DOM using render functions in Vue JS , The node is the smallest unit of constructs in the DOM, so when template You can quickly notice the level of abstraction you get with Vue as you This is the function in JavaScript used inside a Vue component to perform  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. Instead of objects, refs return an array of the items when called.


How to use refs to access your application DOM in Vue.js , Learn how you can easily manipulate DOM elements in your Vue.js to ways to reference HTML elements in your components in Vue.js. Here are a few prerequisites you should already have before going through this article. after the Vue instance has initialized and the component has been rendered,  Vue.js implements some smart heuristics to maximize DOM element reuse, so replacing an array with another array containing overlapping objects is a very efficient operation. track-by In some cases, you might need to replace the Array with completely new objects - e.g. ones created from an API call.


How to Target the DOM in Vue, In jQuery , you would select an element by targeting it with the $() function, Consider the following Vue component Sith.vue . If you don't want a certain piece of your DOM to constantly become re-rendered by Vue, you can  Render Functions & JSX Basics. Vue recommends using templates to build your HTML in the vast majority of cases. There are situations however, where you really need the full programmatic power of JavaScript. That’s where you can use the render function, a closer-to-the-compiler alternative to templates.


Vue Render Functions: What (and How) to Use Them, Render functions are something specifically related to Vue.js. With that short disclaimer out of the way, let's get down to business. When you specify a template on your component, the content of this template will be The render function essentially returns a virtual DOM node which will be rendered by  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.