Refs in VueJs Template HTML Element

What are Refs?

The Refs are vue instance property. That is used to register or indicate the reference of the HTMLElement or Child element of the html.

If you will add ref attribute in your HTML element tag in your vue application component then it will allow you to use that HTML element all that reference or even you can take the child element reference too.

Example 1: ref="input"

This is an simple example use of ref in vuejs.

In this example I have to taken a form, whenever I save the from the input ref will take the input field value. That I will receive into the method.

To receive the value this.$refs.{ref-name}.{attribute-name}, take it's ref name value.

<template>
  <div class="container pt-2">
      <form>
          <input type="text" ref="input">
          <button @click.prevent="saveData">Save</button>
      </form>
      <br>
      This is your output: {{ title }}
  </div>
</template>

<script>

export default {
    name:'ExampleComponent',

    data(){
        return{
            title:'',
        }
    },

    methods:{
        saveData(){

          console.log(this.$refs.input)

          this.title = this.$refs.input.value
        }
    }

}
</script>

Example 2: ref="input" & ref="lableText"

In this example fetching the value of the label text and input value, so when I clicked on the save button saveData the method will run and it will take the label innerHTML from the labelText reference. and also take the value from the input which whatever i text in input field fro the input refs.

<template>
  <div class="container pt-2">
      <form>
          <label ref="lableText">Email: </label>
          <br>
          <input type="text" ref="input">
          <button @click.prevent="saveData">Save</button>
      </form>
      <br>
      <div>{{ lable }}{{ inputValue }}</div>
  </div>
</template>

<script>

export default {
    name:'ExampleComponent',

    data(){
        return{
            inputValue:'',
            lable:''
        }
    },

    methods:{
        saveData(){
            
           this.lable = this.$refs.lableText.innerHTML 
           this.inputValue = this.$refs.input.value
        }
    }

}
</script>

Output Example : Email : webappfix@gmail.com

Example 3: Focus and Style Add

On the mounted, input ref will focus and add style border 1px to this input ref.

<template>
  <div class="container pt-2">
      <form>
          <input type="text" ref="input">
      </form>
      <br>
  </div>
</template>

<script>

export default {
    name:'ExampleComponent',

    mounted(){
        
        this.$refs.input.focus()
        this.$refs.input.style.border="1px solid #66bb6a"
    }

}
</script>

Thanks for reading our post.

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)