VueTemplate Refs are used to refer to specific DOM elements.

When theref attribute is set on an HTML tag, the resulting DOM element is added to the$refs object.

We can use theref attribute and the$refs object in Vue as an alternative to methods in plain JavaScript like getElementById() or querySelector().

Example

The text inside a<p> element is changed.

App.vue:

<template>  <h1>Example</h1>  <p>Click the button to put "Hello!" as the text in the green p element.</p>  <button @click="changeVal">Change Text</button>  <p ref="pEl">This is the initial text</p></template><script>  export default {    methods: {      changeVal() {       this.$refs.pEl.innerHTML = "Hello!";      }    }  }</script>

Example

The text from the first<p> tag is copied into the second<p> tag.

App.vue:

<template>  <h1>Example</h1>  <p ref="p1">Click the button to copy this text into the paragraph below.</p>  <button @click="transferText">Transfer text</button>  <p ref="p2">...</p></template><script>  export default {    methods: {      transferText() {         this.$refs.p2.innerHTML = this.$refs.p1.innerHTML;      }    }  };</script>

Example

A<p> element gets the same content as what's being written in the input field.

App.vue:

<template>  <h1>Example</h1>  <p>Start writing inside the input element, and the text will be copied into the last paragraph by the use of the '$refs' object.</p>  <input ref="inputEl" @input="getRefs" placeholder="Write something..">  <p ref="pEl"></p></template><script>  export default {    methods: {      getRefs() {         this.$refs.pEl.innerHTML = this.$refs.inputEl.value;      }    }  };</script>

Example

The button reveals the the third list element stored as an array element inside the$refs object.

App.vue:

<template>  <h1>Example</h1>  <p>Click the button to reveal the 3rd list element stored as an array element in the $refs object.</p>  <button @click="getValue">Get the 3rd list element</button><br>  <ul>    <li v-for="x in liTexts" ref="liEl">{{ x }}</li>  </ul>  <pre>{{ thirdEl }}</pre></template><script>  export default {    data() {      return {        thirdEl: ' ',        liTexts: ['Apple','Banana','Kiwi','Tomato','Lichi']      }    },    methods: {      getValue() {         this.thirdEl = this.$refs.liEl[2].innerHTML;        console.log("this.$refs.liEl = ",this.$refs.liEl);      }    }  };</script><style>pre {  background-color: lightgreen;  display: inline-block;}</style>

Vue Exercises

<template>  <p>This is just some text.</p>  <p>This is the initial text</p></template><script>  export default {    mounted() {      this..pEl.innerHTML = "Hello World!";    }  };</script>