Sometimes, we want to get an element within a component with Vue.js.
In this article, we’ll look at how to get an element within a component with Vue.js.
How to get an element within a component with Vue.js?
To get an element within a component with Vue.js, we can assign a ref to the element we want to get.
For instance, we write
<template>
<div id="app">
Parent.
<span ref="someName" class="abc">Child Span</span>
</div>
</template>
<script>
//...
export default {
//...
mounted() {
const childSpanClassAttr = this.$refs.someName.getAttribute("class");
console.log(childSpanClassAttr);
},
//...
};
</script>
to assign the someName ref to the span in the template.
Then we get the span in the mounted hook with
this.$refs.someName
And we can use any element method like getAttribute on the element returned by the ref.
Conclusion
To get an element within a component with Vue.js, we can assign a ref to the element we want to get.
