Sometimes, we want to use document.getElementById in Vue.js.

In this article, we’ll look at how to use document.getElementById in Vue.js

How to use document.getElementById in Vue.js?

To use document.getElementById in Vue.js, we can assign a ref to the element we want to get.

And then we can use this.$refs to get the element.

For instance, we write

<template>
  <div>
    <div ref="myDiv">...</div>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    showMyDiv() {
      console.log(this.$refs.myDiv);
    },
  },
  //...
};
</script>

to assign the myDiv ref to the div.

And then we can get the div in the showMyDiv method by using this.$refs.myDiv.

Conclusion

To use document.getElementById in Vue.js, we can assign a ref to the element we want to get.