Vue Template Refs
To make references to particular DOM elements, utilize Vue Template Refs.
The DOM element that results from an HTML tag with the ref attribute set is appended to the $refs object.
Instead of using getElementById() or querySelector() in ordinary JavaScript, we may use the ref attribute and the $refs object in Vue.
The 'ref' Attribute and The '$refs' Object
The $refs object will contain HTML tags with the ref attribute, which can subsequently be accessed from within the <script> tag.
Example
A <p> element’s text gets modified.
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>
Here’s another example of copying a tag’s value into another tag using the $refs object.
Example
The second <p> tag contains a copy of the text from the first <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>
Get The Input Value from '$refs'
To access whatever property we like, we can delve further into an HTML element that has been added to the $refs object.
Example
The content of a <p> element is identical to that entered 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>
'ref' with v-for
The ref attribute-added HTML elements made using v-for will be appended as an array to the $refs object.
Example
The third list element, which is kept as an array element inside the $refs object, is revealed by pressing the button.
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>
