Vue.js Access Dom Nodes using Refs
In this topic, I’m going to share how to access dom nodes using refs in Vue.js.
Meaning of Refs
Ref is used to register or indicate a reference to the HTML element or child element in the template. Syntax:
<!-- template -->
ref='fieldID'
<!-- script -->
this.$refs.fieldID.METHOD
Implement of Refs
We can indicate HTML element via ref. Let’s set focus on a search box input field using ref.
<template>
<div id="app">
<label for="search">Search:</label>
<input type="text" id="search" name="search" ref="searchbox">
</div>
</template>
We’ve identified the search field by ref id searchbox. Let’s focus this:
<script>
export default {
name: 'app',
data() {
return {
}
},
mounted: function() {
this.$refs.searchbox.focus()
}
}
</script>
Md Obydullah
Software Engineer | Ethical Hacker & Cybersecurity...
Md Obydullah is a software engineer and full stack developer specialist at Laravel, Django, Vue.js, Node.js, Android, Linux Server, and Ethichal Hacking.