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>