Vue 'ref' Attribute
Example
Using theref attribute to change the text inside the<p> tag:
<p ref="pEl">Initial text.</p>
<button v-on:click="changeText">Change text</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="module">
const app = Vue.createApp({
methods: {
changeText(){
this.$refs.pEl.innerHTML = "Hello!";
}
}
})
app.mount('#app')
</script>
See more examples below.
Definition and Usage
Theref attribute is used to mark elements in<template>, so that they can be accessed from the$refs object inside<script>.
We can use theref attribute and the$refs object in Vue as an alternative to methods in plain JavaScript likegetElementById() orquerySelector().
If HTML elements created withv-for have theref attribute, the resulting DOM elements will be added to the$refs object as an array, like demonstrated in this example:
More Examples
Example 1
The text inside a<p> element is changed.
<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><br> <p ref="pEl" id="pEl">This is the initial text</p></template><script> export default { methods: { changeVal() { this.$refs.pEl.innerHTML = "Hello!"; } } };</script><style>#pEl { background-color: lightgreen; display: inline-block;}</style>Example 2
The text from the first<p> tag is copied into the second<p> tag.
<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 3
A<p> element gets the same content as what's being written in the input field.
<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 4
The button reveals the the third list element stored as an array element inside the$refs object.
<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 Tutorial:Vue v-for Directive
Vue Reference:Vue $refs Object
