Vue $refs Object

methods: {  changeVal() {    this.$refs.pEl.innerHTML = "Hello!";  }}

Definition and Usage

DOM elements marked with the built-inref attribute are stored in the$refs object.

Elements inside the$refs object can be reached with thethis keyword.

The$refs object is used to reach DOM elements to read or manipulate them in a similar way asquerySelector() andgetElementById() are used in plain JavaScript.

More Examples

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

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

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

Related Pages

Vue Tutorial:Vue Template Refs

Vue Reference:Vue 'ref' Attribute