How to reference hidden elements in Vue.js

In Vue.js we can reference either Vue.js component or a standard DOM element by marking it with ref=”ourReferenceName” inside the HTML tag and later access this element easily inside the component with this.$refs.ourReferenceName. Let’s have a look at a simple component example:

<template>
  <div>
    <div ref="referencedElement"></div>
  </div>
</template>

<div>

</div>

</template>

<script>
export default {
  methods: {
    accessElement() {
      const element = this.$refs.referencedElement
      // TODO: do something with the element
    }
  }
}
</script>

export default {

methods: {

accessElement() {

const element = this.$refs.referencedElement

// TODO: do something with the element

}

</script>

So far so good. The problem comes when we want to […]