Categories
Vue Answers

How to get the DOM element to corresponding Vue.js component with JavaScript?

Spread the love

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

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

How to get the DOM element to corresponding Vue.js component with JavaScript?

To get the DOM element to corresponding Vue.js component with JavaScript, we can use refs.

For instance, we write

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

<script>
export default {
  mounted() {
    const rootElement = this.$el;
    const childElement = this.$refs.childElement;

    console.log(rootElement);
    console.log(childElement);
  },
};
</script>

to assign the childElement ref to the div.

Then in the mounted hook, we get the root element of the component with this.$el.

And we get the div with this.$refs.childElement.

Conclusion

To get the DOM element to corresponding Vue.js component with JavaScript, we can use refs.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.