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> |
|
<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 […]