How to access the dom nodes in Vue using refs
In this post we will give you information about How to access the dom nodes in Vue using refs. Hear we will give you detail about How to access the dom nodes in Vue using refsAnd how to use it also give you demo for it if it is necessary.
we are going to learn about accessing the dom nodes in Vue using the refs.
Refs
Refs are used to access the html elements inside the vue instance.
If you add a ref attribute to the HTML element in your vue template, that element can be accessed in your vue instance using this.$refs property.
Let’s see an example.
<template> <div> <label for="box">Search : </label> <input ref="search" v-model="query" id="box" /> </div></template><script>export default { data: function() { return { query: "" }; }, mounted: function() { // accessing the input node this.$refs["search"].focus(); }};</script>In the above code, we have added ref atrribute to input element so that we accessed it inside the mounted lifecycle hook with this.$refs[‘search’].
Whenever a user opens our app we are focussing the input placeholder like Google search box.
Hope this code and post will helped you for implement How to access the dom nodes in Vue using refs. 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