Vue.js: Getting the element in a Component
In this post we will give you information about Vue.js: Getting the element in a Component. Hear we will give you detail about Vue.js: Getting the element in a ComponentAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to get the element inside a component in the Vue app.
Getting the Element
- Add the ref attribute with a value to the element like this.
<template> <input ref="nameInput" /></template>
- Now, in the component <script> tag we can access the above element using this.$refs.nameInput property.
<script> export default{ mounted(){ console.log(this.$refs.nameInput); } }</script>You can also manipulate the element behavior like this.
this.$refs.nameInput.focus();
or you can access the input element value.
this.$refs.nameInput.value;
Note: The $refs are available after a component has been rendered and they are not reactive, so that you should avoid accessing refs inside the created() lifecycle hook, computed properties.
Hope this code and post will helped you for implement Vue.js: Getting the element in a Component. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs