Vue.js Access Dom Nodes using Refs

Published: Dec 22, 2019 - Updated: Mar 16, 2022

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 -->

<!-- script -->

Implement of Refs

We can indicate HTML element via ref. Let’s set focus on a search box input field using ref.

  <div id="app">
    <label for="search">Search:</label>
    <input type="text" id="search" name="search" ref="searchbox">

We’ve identified the search field by ref id searchbox. Let’s focus this:

export default {
  name: 'app',
  data() {
    return {
  mounted: function() {


No comments yet…