Categories
Vue Answers

How to Get the DOM Element for the Corresponding Vue.js Component?

Spread the love

Sometimes, we want to get the DOM element for the corresponding Vue.js component.

In this article, we’ll look at how to get the DOM element for the corresponding Vue.js component.

Get the DOM Element for the Corresponding Vue.js Component

We can get the root element of the component with the this.$el property.

And to get a child element, we can assign a ref to it and then reference it with this.$refs .

For instance, we can write:

<template>
  <div id="app">
    root element
    <div ref="childElement">child element</div>
  </div>
</template>

<script>
export default {
  name: "App",
  mounted() {
    const rootElement = this.$el;
    const childElement = this.$refs.childElement;
    console.log(rootElement);
    console.log(childElement);
  },
};
</script>

this.$el is the div with ID app .

And we assign the ref prop of the inner div with value childElement .

So we can get the inner div element with this.$refs.childElement .

And the corresponding values are logged in the console log.

Conclusion

We can get the root element of the component with the this.$el property.

And to get a child element, we can assign a ref to it and then reference it with this.$refs .

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *